Common API

All of the common API properties support using the responsive styles syntax if breakpoints are defined in the theme. Simply pass an array of values to the property instead of a single value.

The first value in the array will be the base style. The second value in the array will be applied at the smallest breakpoint and up. The third value will be applied at the second smallest breakpoint and up, etc.

Using null for one of the values in the array will cause the previous value to be applied until the next breakpoint.

<Box
    width={[ '100px', '200px' ]}
    height={[ '50px', null, '100px' ]}
    backgroundColor={[ 'Tertiary', null, null, 'Secondary' ]}
/>
<Box
    width={[ '100px', '200px' ]}
    height={[ '50px', null, '100px' ]}
    backgroundColor={[ 'Tertiary', null, null, 'Secondary' ]}
/>
Live Demo

All layout components share a common styling API as detailed below. These style props will accept any appropriate CSS values - including units like vw and vh, and functions like calc(), rgba(), hsl(), etc.

If you're using a theme, many of these style props will have direct access to the design tokens and scales in the theme. Refer to the tables below to see which style props have access to which theme keys.

In addition to the style props detailed below, all layout components also have access to the props mentioned in the advanced API section.