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.

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.

<Heading
  size={{
    default: '6',
    xs: '6',
    sm: '5',
    md: '4',
    lg: '3',
    xl: '2'
>
  {`This text will shrink/grow as the screen resizes.`}
</Heading>