PostCSS Spacing

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>

Classes

Below you can find the class names for all sizes. Make sure your element includes both classes as specified.

Show & Hide Spaces

Each element can be specified to be shown or hidden in a specific media query.