skip to content
  • Calendar
  • Maps

Sections

Basic Sections

Sections can be considered our top-level organizational tool. Even on pages with a single section, it is still recommended to use one. They help provide the spacing on pages and separate out different content.

<section class="section">
  <!--...-->
</section>

Shaded Sections

Shaded sections help provide a good user experience by providing another visual cue to differentiate between different sections of content.

<section class="section --shaded">
  <!--...-->
</section>

Example

<section class="section">
  <div class="container">
    <!--...-->
  </div>
</section>
<section class="section --shaded">
  <div class="grid --sm-1 --med-2 --lrg-4">
    <div class="grid__col">
      <!--...-->
    </div>
    <div class="grid__col">
      <!--...-->
    </div>
    <div class="grid__col">
      <!--...-->
    </div>
    <div class="grid__col">
      <!--...-->
    </div>
  </div>
</section>

Header

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio eligendi tempore delectus pariatur nemo non, obcaecati optio. Nostrum, deleniti dolores cumque itaque accusamus ullam porro temporibus sit officia molestias suscipit.

Sub Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit itaque, dolorum minima enim rem, architecto deleniti ipsa doloremque blanditiis similique obcaecati repellendus reiciendis veniam quae minus illo! Exercitationem, soluta aperiam?

HTML

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae impedit suscipit at consequuntur asperiores voluptates minus dolorum a quis tempore hic modi, ratione illo ea cupiditate consectetur aspernatur! Qui, sed!

CSS

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae impedit suscipit at consequuntur asperiores voluptates minus dolorum a quis tempore hic modi, ratione illo ea cupiditate consectetur aspernatur! Qui, sed!

Javascript

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae impedit suscipit at consequuntur asperiores voluptates minus dolorum a quis tempore hic modi, ratione illo ea cupiditate consectetur aspernatur! Qui, sed!

SCSS

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae impedit suscipit at consequuntur asperiores voluptates minus dolorum a quis tempore hic modi, ratione illo ea cupiditate consectetur aspernatur! Qui, sed!

Header

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio eligendi tempore delectus pariatur nemo non, obcaecati optio. Nostrum, deleniti dolores cumque itaque accusamus ullam porro temporibus sit officia molestias suscipit.

Sub Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit itaque, dolorum minima enim rem, architecto deleniti ipsa doloremque blanditiis similique obcaecati repellendus reiciendis veniam quae minus illo! Exercitationem, soluta aperiam?