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.

CSS variables

You can override the default padding with the following CSS variables.

.section {
  --padding: 6rem 1rem;
  --padding-small: 3rem 1rem;
  --padding-large: 12rem 1rem;
}
Copy

Sass variables

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