Section

A simple container for dividing your page into sections

Sections are a great way of grouping together related elements into separated blocks within your page.

<section class="section">
  <div class="container">
    <h1>I'm a section!</h1>
  </div>
</section>
Copy

Use the modifiers is-small and is-large to adjust the padding on the top and bottom of the section.


The section class does not have to be applied to semantic elements such as section and can be applied to a div or any other HTML element.


Variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.


VariableTypeDefault value
$section-paddingpadding6rem 1rem
$section-padding-smallpadding3rem 1rem
$section-padding-largepadding12rem 1rem