Display

Overview

The display is a dynamic and responsive CSS display property.

Implementation

A few of our components expose a display prop in order to change the CSS display property. See a components prop table to see if this prop exists.

Edit the code below to see your changes live!

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

Props

Prop name
Type
Default
Description
displayblock | inline-block | inline | inline-flex | flex | grid | inline-grid | none

Sets the CSS display property of a component.

Props ending with * are required

Do's and Don'ts

Do
Use the display prop for responsiveness.
Don't
Don't use display="none" directly on a component, instead don't render it.