Built-in breakpoints allow you to easily build adaptive layouts.
Each breakpoint matches a fixed screen width. Values are min-width based and apply when the screen width is equal or greater.
| Size | Width |
|---|---|
initial Phones | 0px |
xs Small tablets | 520px |
sm Tablets | 768px |
md Laptops | 1024px |
lg Desktops | 1280px |
xl Large desktops | 1640px |
Most component size and layout props will accept an additional responsive object shape for modifying the given prop across breakpoints.
Each size maps to a corresponding key, the value of each will be applied when the screen size is greater than or equal to the named breakpoint.
<Heading
size={{
initial: '3',
md: '5',
xl: '7',
}}
/>