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?