Documentation/ Spacing

Spacing classes can be used to stitch together components. This is useful because if you build the spacing before and after a component into the component itself, it's less likely to be reusable in a different context.

All spacing classes follow a similar format: .util-[property]-[side]-[amount].

Class Section Options Description
[property]
margin
pad

This defines which spacing property to utilize, either margin for a margin property or pad for a padding property
[side]
all
vert
horiz
top
bottom
left
right

The side options are which side of the box to place the spacing amount. For a combined top and bottom value, use vert, for a combined right and left value use horiz. To apply the same value to all sides use all.
[amount]
none
xs
sm
md
lg
xl
xxl

The amount of spacing is a lettered value for a multiplier of the base spacer value. By default the base spacer value is 1rem, this is the amount use on the md amount. sm and xs are 0.5 and 0.25 times smaller than .md meanwhile lg, xl, and xxl are 1.5, 3, and 5 times larger than md, respectively. To use a zero value spacing use the amount none.
[breakpoint]
@sm
@md
@lg
@xl

An optional section can be added to the end of the class to indicate a breakpoint value (.util-[property]-[side]-[amount]-@[breakpoint]). For example, if you want a div to change from having small padding to a large padding at a specific breakpoint, this class section can be used to do just that:
<div class="util-pad-all-sm util-pad-all-md@lg" >

Margin

Class Description
.util-margin-bottom-none Removes margin from the bottom of an element.
.util-margin-bottom-xs Adds an extra small amount of margin to the bottom of an element.
.util-margin-bottom-sm Adds a small amount of margin to the bottom of an element.
.util-margin-bottom-md Adds a medium amount of margin to the bottom of an element.
.util-margin-bottom-lg Adds a large amount of margin to the bottom of an element.
.util-margin-bottom-xl Adds an extra large amount of margin to the bottom of an element.
.util-margin-bottom-xxl Adds an extra extra large amount of margin to the bottom of an element.
.util-margin-top-none Removes margin from the top of an element.
.util-margin-top-xs Adds an extra small amount of margin to the top of an element.
.util-margin-top-sm Adds a small amount of margin to the top of an element.
.util-margin-top-md Adds a medium amount of margin to the top of an element.
.util-margin-top-lg Adds a large amount of margin to the top of an element.
.util-margin-top-xl Adds an extra large amount of margin to the top of an element.
.util-margin-top-xxl Adds an extra extra large amount of margin to the top of an element.

Padding

Class Description
.util-pad-bottom-none Removes padding from the bottom of an element.
.util-pad-bottom-xs Adds an extra small amount of padding to the bottom of an element.
.util-pad-bottom-sm Adds a small amount of padding to the bottom of an element.
.util-pad-bottom-md Adds a medium amount of padding to the bottom of an element.
.util-pad-bottom-lg Adds a large amount of padding to the bottom of an element.
.util-pad-bottom-xl Adds an extra large amount of padding to the bottom of an element.
.util-pad-bottom-xxl Adds an extra extra large amount of padding to the bottom of an element.
.util-pad-top-none Removes padding from the top of an element.
.util-pad-top-xs Adds an extra small amount of padding to the top of an element.
.util-pad-top-sm Adds a small amount of padding to the top of an element.
.util-pad-top-md Adds a medium amount of padding to the top of an element.
.util-pad-top-lg Adds a large amount of padding to the top of an element.
.util-pad-top-xl Adds an extra large amount of padding to the top of an element.
.util-pad-top-xxl Adds an extra extra large amount of padding to the top of an element.

Responsive Spacing

To adjust margin and padding at different breakpoints you can add @sm, @md, @lg, @xl after any of the spacing classes:


  <div class="util-margin-bottom-sm util-margin-bottom-md@md util-margin-bottom-lg@lg"></div>
  <div class="util-margin-bottom-sm util-margin-bottom-md@md util-margin-bottom-lg@lg"></div>
  <div class="util-margin-bottom-sm util-margin-bottom-md@md util-margin-bottom-lg@lg"></div>