Design
Breakpoints
Breakpoints allow you to build responsive layouts by reacting to screen size changes.
There are 6 predefined breakpoint values, xs, sm, md, lg, xl and default.
Breakpoints are triggered once the screen width is greater than the specified width value.
| Size | Device | Width |
|---|---|---|
| default | Phones (portrait) | 0px |
| xs | Phones (landscape) | 520px |
| sm | Tablets (portrait) | 728px |
| md | Tablets (landscape) | 1024px |
| lg | Laptops | 1280px |
| xl | Desktops | 1640px |
Usage
Certain properties of layout components accept a Responsive object, which specifies what value
to apply at a given breakpoint.
For example, the Heading component takes a size prop. If we pass in a
Responsive object, we can specify which sizes to display at different breakpoints.
This text will shrink/grow as the screen resizes.
<Heading
size={{
default: '6',
xs: '6',
sm: '5',
md: '4',
lg: '3',
xl: '2'
>
{`This text will shrink/grow as the screen resizes.`}
</Heading>