Spacing

Base

Margins

To prevent unintentioal margin collapse, best practice recommends declaring margins in a single direction, so only mr (margin right) and mb (margin bottom) variants are available, which each have spacing defined by the values in $spacing.

<button class="c-button u-mb-large">Component #1</button>
<button class="c-button u-mb-regular">Component #2</button>
<button class="c-button u-mr-huge">Component #3</button>

Paddings

Using the example classes below, you can apply regular spacing as padding in the following ways:-

• u-pt-regular - Padding top
• u-pr-regular - Padding right
• u-pb-regular - Padding bottom
• u-pl-regular - Padding left
• u-pv-regular - Vertical padding
• u-ph-regular - Horizontal padding
• u-p-regular- Padding in all directions

<div class="u-p-regular c-box u-mb-regular">Regular padding</div>
<div class="u-pv-small c-box u-mb-regular">Small vertical padding</div>
<div class="u-pr-small u-pt-large c-box">Small right padding and large top padding</div>

Responsive

Spacing utilities can also be triggered at various breakpoints.

<div class="c-box u-p-small u-p-regular@md u-mb-large u-mb-none@md2 u-mb-regular@lg">Component #1</div>
<div class="c-box u-pv-regular u-p-large@md u-mb-regular u-mb-small@md">Component #2</div>

Disable Last Child Margins

Adding this class to an element with a spacing utility means that if that element is also the last child element of its parent, the spacing won't be applied. This is almost exclusively used for programatically generated elements with margins, where the last element in the set needs to be margin free.

<button class="c-button u-mb-large u-mb-disable-last-child">Programatically generated component</button>
<button class="c-button u-mb-large u-mb-disable-last-child">Programatically generated component</button>
<button class="c-button u-mb-large u-mb-disable-last-child">Programatically generated component</button>