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 />
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" |