Box

Edit on GitHub

Box is the most fundamental layout component, which most of the other components are based on. Box provides convenient utility props for common styles, using our design tokens. These include props for...

  • Margin
  • Padding
  • Rounding (border radius)
  • Background color
import { Box } from 'design-system/box';

As Prop

Using the As prop, you specify the HTML tag to be rendered.

div
is the default.

Responsive props

Styles that differ across screen sizes can be expressed as responsive props. This array syntax is read mobile-first.


  • Home
  • About
  • Blog
  • Design System
© Copyright 2021 Nathan Simpson. Made in Sydney Australia.