Section

Sections represent distinct areas of a screen—e.g. marketing site sections.

Default section

A Section component can contain almost content but usually contains a main Heading. Sections have no background color by default.

This is a main heading

<section class="Section">
  <h2 class="Heading size5 ta-center">This is a main heading</h2>
</section>

Colors

You can use utility classes to add color to Section components.

This is a main heading

<section class="Section bc-violet">
  <h2 class="Heading size5 ta-center color-white">This is a main heading</h2>
</section>

Sizes

There are three size variations. Smaller sizes work well with more compact content with a tighter focus. Larger sizes work well with sparse content and looser content layouts.

This is a main heading

<section class="Section size1 bc-violet">
  <h2 class="Heading size5 ta-center color-white">This is a main heading</h2>
</section>

<section class="Section size2 bc-indigo">
  <h2 class="Heading size5 ta-center color-white">This is a main heading</h2>
</section>

<section class="Section size3 bc-blue">
  <h2 class="Heading size5 ta-center color-white">This is a main heading</h2>
</section>

Responsive sizes

A Section can switch sizes as the viewport width changes by specifying responsive size classes prefixed with bp1-, bp2-, bp3- or bp4-. Resize your browser window to see the Section below adapt.

This is a main heading

<section class="Section size1 bp1-size2 bp2-size3 bc-red">
  <h2 class="Heading size5 ta-center color-white">This is a main heading</h2>
</section>

Expanded section

You can expand a Section to stretch to the full height of the viewport.

This is a main heading

<section class="Section expanded bc-violet">
  <h2 class="Heading size5 ta-center color-white">This is a main heading</h2>
</section>

Full example with content

You can expand a Section to stretch to the full height of the viewport.

This is a main heading

This is a sub heading

<section class="Section bp1-size3 bc-pink">
  <div class="Container size3">
    <div class="mb-1">
        <h2 class="Heading size6 ta-center lh-8 color-white">This is a main heading</h2>
    </div>
    <div class="mb-5">
        <h3 class="Heading size3 ta-center lh-6 color-white opacity-70">This is a sub heading</h3>
    </div>
    <div class="ta-center">
        <button class="PillButton white" type="button">Button</button>
    </div>
  </div>
</section>