Breakpoints

Define responsive breakpoints for your layout.

Each breakpoint matches a fixed screen width. Values are min-width based and apply when the screen width is equal or greater.

Size	Description	Width
initial	Phones (portrait)	0px
xs	Phones (landscape)	520px
sm	Tablets (portrait)	768px
md	Tablets (landscape)	1024px
lg	Laptops	1280px
xl	Desktops	1640px

Usage

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",
  }}
/>