Spacing Component
Spacings are defined in the design system. Cherry has a special <Space /> component that generates any desired space. The component can have various sizes depending on the media query. To change it to horizontal (in-line) use the prop horizontal.
<Space size={24} />
<Space xs="none" lg={160} />
<Space xs={24} lg="none" horizontal />Props
Below you can find all the available props for this component.
| Property | Description | Type |
|---|---|---|
| horizontal | Switch to horizontal (in-line) spaces | Boolean |
| size | Defines the space for all media queries | Number | "none" |
| xs | Defines the space for XS media query | Number | "none" |
| sm | Defines the space for SM media query | Number | "none" |
| md | Defines the space for MD media query | Number | "none" |
| lg | Defines the space for LG media query | Number | "none" |
| xl | Defines the space for XL media query | Number | "none" |
| xxl | Defines the space for XXL media query | Number | "none" |
| xxxl | Defines the space for XXXL media query | Number | "none" |
