Box

Box renders a responsive box-model layout component.

Usage Example

Live Editor

Result

Margin and padding

The space function adds margin and padding props. The margin and padding props use a shorthand syntax, similar to Basscss, Tachyons, and Bootstrap.

Margin props

m marginmt margin-topmr margin-rightmb margin-bottomml margin-leftmx margin-left and margin-rightmy margin-top and margin-bottom

Padding props

p paddingpt padding-toppr padding-rightpb padding-bottompl padding-leftpx padding-left and padding-rightpy padding-top and padding-bottom

Space Theming

To set a consistent white-space scale, add a space array to your theme. Use numbers to set pixel values, or use strings for other CSS units such as rem.

// theme.jsexport default {  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],};

All spacing props accept numbers, strings, or arrays as values, where:

Numbers between 0 and the last index of the space array are values from the space array defined in themeNumbers greater than the length of the spacearray are converted to pixelsString values can be used for any valid CSS value (e.g. 'auto' or '2em')Margin props accept negative values to set negative marginArrays can be used for responsive styles

Width

The width function adds a single width prop for setting responsive width styles.

The width prop accepts number, string, or array values, where:

Numbers between 0 and 1 are converted to percentage based widths (e.g. 1/2 becomes '50%')Numbers greater than 1 are converted to pixelsStrings can be used for other CSS values (e.g. '50vw' or '30em')Arrays can be used for responsive styles

Responsive Styles

All styled-system functions accept arrays as values to set styles responsively using a mobile-first approach.

<Box  width={[    1, // 100% below the smallest breakpoint    1 / 2, // 50% from the next breakpoint and up    1 / 4, // 25% from the next breakpoint and up  ]}/>

props

theme object (optional)

Styled System Props

Box uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.