Spacings are defined in the design system, and for each size there is a class name. Assign the desired class name to a div element to add the space. Spaces push vertically by default. To change it to horizontal (in-line) use the .horizontal class name. Spaces can be specified to be shown in a specific media query, this allows different spacings in different screen resolutions.
<span class="space size-24"></span>
<span class="space size-160 xs-hide lg-show"></span>
<span class="space size-24 horizontal xs-show lg-hide"></span>
Below you can find the class names for all sizes. Make sure your element includes both classes as specified.
Class Name | Size |
---|---|
space size-2 | 2px |
space size-4 | 4px |
space size-8 | 8px |
space size-12 | 12px |
space size-16 | 16px |
space size-24 | 24px |
space size-32 | 32px |
space size-48 | 48px |
space size-56 | 56px |
space size-64 | 64px |
space size-96 | 96px |
space size-128 | 128px |
space size-160 | 160px |
Each element can be specified to be shown or hidden in a specific media query.
Class Name | Description |
---|---|
space horizontal | Horizontal space (in-line) |
xs-hide | Hide on XS media query |
xs-show | Show on XS media query |
sm-hide | Hide on SM media query |
sm-show | Show on SM media query |
md-hide | Hide on MD media query |
md-show | Show on MD media query |
lg-hide | Hide on LG media query |
lg-show | Show on LG media query |
xl-hide | Hide on XL media query |
xl-show | Show on XL media query |
xxl-hide | Hide on XXL media query |
xxl-show | Show on XXL media query |
xxxl-hide | Hide on XXXL media query |
xxxl-show | Show on XXXL media query |