Sections
Sections are the largest in-page containers in our UI: they break up pages into major chapters or topics.
Pretty much all of the other components in this library, e.g., cards and text, are supposed to go inside sections (the exception being stuff like navigation bars and modals). Some pages will have multiple containers—e.g., the Hired.com homepage—while some will have just one—e.g., something like our position list pages in EMP.
Section
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
Section White
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
Section Dark
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
Section Tall
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
Section Short
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
%section
%h2 Section
%p.copy Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
%section.section--white
%h2 Section White
%p.copy Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
%section.section--dark
%h2.text--white Section Dark
%p.copy.text--white Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
%section.section--tall
%h2 Section Tall
%p.copy Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
%section.section--short
%h2 Section Short
%p.copy Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
<section>
<h2>Section</h2>
<p class='copy'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.</p>
</section>
<section class='section--white'>
<h2>Section White</h2>
<p class='copy'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.</p>
</section>
<section class='section--dark'>
<h2 class='text--white'>Section Dark</h2>
<p class='copy text--white'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.</p>
</section>
<section class='section--tall'>
<h2>Section Tall</h2>
<p class='copy'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.</p>
</section>
<section class='section--short'>
<h2>Section Short</h2>
<p class='copy'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.</p>
</section>Backup plan
If the section component isn't working in your situation, the closest prior component was the .box and .container setup described on the old Container component page.
Contact
Primary designer was Alex Couch; primary developer was Carlos Leon.