Display

A few of our components expose a display prop in order to change the CSS display property.

Boxed content

Edit the code below to see your changes live!

<Box display="inline-block" backgroundColor="secondary20" border="box" padding="medium">
  Boxed content
</Box>

<Box display="inline-block" backgroundColor="secondary20" border="box" padding="medium">
  Boxed content
</Box>

It's also possible to use the prop with responsive breakpoints:

Boxed content hidden on mobile.

Boxed content hidden on tablet.

Edit the code below to see your changes live!

<>
  <Box
    display={{ mobile: 'none', tablet: 'inline-block' }}
    backgroundColor="secondary20"
    border="box"
    padding="medium"
  >
    Boxed content hidden on mobile.
  </Box>
  <Box display={{ mobile: 'block', tablet: 'none' }} backgroundColor="primary10" border="box" padding="medium">
    Boxed content hidden on tablet.
  </Box>
</>

<>
  <Box
    display={{ mobile: 'none', tablet: 'inline-block' }}
    backgroundColor="secondary20"
    border="box"
    padding="medium"
  >
    Boxed content hidden on mobile.
  </Box>
  <Box display={{ mobile: 'block', tablet: 'none' }} backgroundColor="primary10" border="box" padding="medium">
    Boxed content hidden on tablet.
  </Box>
</>

Display

Prop Name	Type	Default	Description
`display`	`block` \| `inline-block` \| `inline` \| `inline-flex` \| `flex` \| `grid` \| `inline-grid` \| `none`		Sets the CSS display property of a component.

Props ending with * are required

Beta