Spacing<!-- --> | Broadacre

Spacing

Spacing utility classes can be used to add padding or margin to any element. Prefix spacing classes with the appropriate classes for margin and padding top, bottom, left, right or all. For example a class of .pad-a-4 would add 1rem of padding to all sides and a class of .mar-l-2 would add 0.5rem of margin on the left of the element. Appending a breakpoint suffix to the class (-md for <992px browser widths, -lg for >992px browser widths) will apply the spacing utility class in the respective browser width. For example, .pad-l-0-md will apply a left padding of 0 only on browser widths below 992px.

Broadacre Spacing Tokens

Token
Value
REM
Example
spacing-1
4px
0.4
spacing-2
8px
0.8
spacing-3
12px
1.2
spacing-4
16px
1.6
spacing-5
24px
2.4
spacing-6
32px
3.2
spacing-7
48px
4.8
spacing-8
64px
6.4
spacing-9
80px
8.0
spacing-10
96px
9.6
spacing-11
112px
11.2
spacing-12
128px
12.8
spacing-13
144px
14.4