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 xs="none" lg={160} />
<Space xs={24} lg="none" horizontal />


Below you can find all the available props for this component.

horizontalSwitch to horizontal (in-line) spacesBoolean
sizeDefines the space for all media queriesNumber | "none"
xsDefines the space for XS media queryNumber | "none"
smDefines the space for SM media queryNumber | "none"
mdDefines the space for MD media queryNumber | "none"
lgDefines the space for LG media queryNumber | "none"
xlDefines the space for XL media queryNumber | "none"
xxlDefines the space for XXL media queryNumber | "none"
xxxlDefines the space for XXXL media queryNumber | "none"
Input ComponentsGrid Components