Spaces

The spaces foundation provides directional spacing utilities to manage vertical rhythm across components. Each spacing variation is defined through a mixin and compiled into a foundation class that controls consistent vertical spacing between elements.

Instead of a single spacing class, spacing is now applied explicitly using top and bottom variations.

All spacing utilities are responsive by default, ensuring consistent behavior across breakpoints.

---

Naming conventions

.f--sp-top-{variation}
.f--sp-bottom-{variation}

• {variation} represents a specific spacing size (e.g., a, b, c)
• Each variation is generated from a mixin with predefined margin values
• top applies margin-top
• bottom applies margin-bottom

---

How to use it

In HTML

<div class="f--sp-top-a">Top spacing A</div>
<div class="f--sp-bottom-c">Bottom spacing C</div>

You can also combine them when needed:

<div class="f--sp-top-b f--sp-bottom-b">Vertical spacing B</div>

In SCSS

// using @extend (recommended)
.c--component-a {
  @extend .f--sp-top-b;
  @extend .f--sp-bottom-b;
}

// using the mixin directly (only if necessary)
.c--component-a {
  @include make-sp-top-b();
  @include make-sp-bottom-b();
}