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>

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.

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;

Sass 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