Maturity
Beta
Show details
Overview
Adapt the elements' layout based on the viewport size.
Breakpoints
|
Breakpoint range |
Token |
Description |
|---|---|---|
|
Up to 600px |
breakpoint-SM |
Narrow. Applies to narrow viewports, such as those on mobile devices in portrait mode. The layout needs to be modified to be displayed properly on this view. |
|
600px - 1024px |
breakpoint-MD |
Compact. Covers a range of small to medium viewports, including tablets and larger mobile devices in landscape mode. Requires some modifications on the layout to accommodate the content. Some of the product experience might suffer. |
|
1024px - 1440px |
breakpoint-LG |
Optimal. Optimized for desktop and laptop screens. The most optimal view. The product is experienced at its best. |
Quality checklist
This element passes the following requirements described in our Component lifecycle.
Beta
α · Design tokens
It uses Ariane design tokens.
α · Naming agreement
Its name is agreed upon and shared between design and development.
α · Responsive L1
Is responsive to different viewport sizes.
β · Responsive L2
The responsive behavior has been reviewed and validated by the team.
β · Docs L1
It has essential documentation with at least primary usage.
β · Use cases
All the uses are audited and refined.