Skip to content

Spacing

Spacing scale

The spacing scale in If Design System is based on our 4px/8px baseline grid. All values goes up in either 4px or 8px.

Applying spacing

You can either use class helpers or design tokens:

margin: $size-spacing-4;
margin: $size-spacing-40 $size-spacing-16;
margin: $size-spacing-32 0 $size-spacing-4 0;
margin-right: $size-spacing-12;
padding: $size-spacing-4;
padding: $size-spacing-12 $size-spacing-40;
padding: $size-spacing-32 $size-spacing-4 0 $size-spacing-4;
<div class="if u-padding-sm-right--32 u-padding-xs-right--16"></div>

See the Util Component for more details and a full set of tokens.

Edit this section

Contact us