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.


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

Variable Type Default Value
$section-padding padding 6rem 1rem
$section-padding-small padding 3rem 1rem
$section-padding-large padding 12rem 1rem