🎨 Section

The section foundation defines vertical padding used to space out large content blocks like sections. Each class is based on a mixin and applies top and/or bottom padding that adapts across breakpoints and follows the naming convection:

.f--section-{variation}

🔧 How to use it

In HTML

<div class="f--section-a">Section A</div>
<div class="f--section-c">Section C</div>

In SCSS

Extending the generated foundation class — preferred method:

.c--component-a {
  @extend .f--section-b;
}

Using the mixin directly — only if strictly necessary:

.c--component-a {
    @include make-section-b();
}

Codepen example:

Link to Codepen