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.

<Heading
  size={{
    default: '1',
    xs: '2',
    sm: '3',
    md: '5',
    lg: '7',
    xl: '9',
  }}
/>