Spaces

The spaces foundation provides bottom margins 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.

---

Naming conventions

.f--sp-{variation}

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

---

How to use it

In HTML

<div class="f--sp-a">Section with spacing A</div>
<div class="f--sp-c">Section with spacing C</div>

In SCSS

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

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