| Key | Value |
|---|---|
$spacing-baseline |
6px |
$spacing-tiny |
6px |
$spacing-small |
12px |
$spacing-base |
24px |
$spacing-large |
48px |
$spacing-huge |
96px |
Spacing utility classes are available and make it easy to add margins or padding. Use these following classes to add correct spacing:
.u-padding-{top|right|bottom|left|horizontal|vertical}-{tiny|small|large|huge|none}
.u-margin-{top|right|bottom|left|horizontal|vertical}-{tiny|small|large|huge|none}For example, if you wanted to add $spacing-base padding around a whole element (top, right, bottom, and left), you would add the class u-padding. If you wanted to add $spacing-small sized margin to the top and bottom of an element, you would add the class u-margin-vertical-small.