Skip to content
Terra Docs
Blog
User
My Profile & Progress
Log out

Section

The section foundation defines vertical padding used to space out large content blocks like sections.

Naming conventions

Section titled “Naming conventions”
.f--section-{variation}

How to use it

Section titled “How to use it”

In HTML

Section titled “In HTML”
<div class="f--section-a">Section A</div>
<div class="f--section-c">Section C</div>

In SCSS

Section titled “In SCSS”
// using @extend (recommended)
.c--component-a {
  @extend .f--section-b;
}
// using the mixin directly (only if necessary)
.c--component-a {
    @include make-section-b();
}

Codepen example:

Section titled “Codepen example:”

Knowledge Check

Test your understanding of this section

Loading questions...