Spacing
The design system uses multiples of 8px for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.
Sass / CSS
When applying padding and margin to elements and components, rather than entering hard coding, use the $multiple variable, which is equivalent to 8px. You can use basic math in Sass to keep the rhythm consistent.
.sba-c-some-component {
padding: $multiple;
margin-bottom: $multiple * 2;
}Usage
Use the margin and padding utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds 16px of spacing would be sba-u-margin--2. We can calculate this by looking at the class's modifier (2) and multiplying that by our multiple: 2 × 8px = 16px
If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format $spacer-* where * is a number between 1–7 (i.e. $spacer-4)