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 |
---|---|---|---|
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
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. |