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-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-180 | 180px |
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 |