Sections
Sections are designed to provide vertical rhythm between related information. The default spacing between each section is 72px, however if more breathing room is needed look at further spacing modifiers below.
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
<section class="o-section">
<div class="o-wrapper">
<div class="o-focus">
<h3 class="u-heading u-epsilon">Section 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</section>
<section class="o-section">
<div class="o-wrapper">
<div class="o-focus">
<h3 class="u-heading u-epsilon">Section 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</section>Sizes
Modifiers for sections with smaller/larger vertical spacing.
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
<section class="o-section o-section--sm">
<div class="o-wrapper">
<div class="o-focus">
<h3 class="u-heading u-epsilon">Section 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</section>
<section class="o-section o-section--sm">
<div class="o-wrapper">
<div class="o-focus">
<h3 class="u-heading u-epsilon">Section 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</section><section class="o-section">
<div class="o-wrapper">
<div class="o-focus">
<h3 class="u-heading u-epsilon">Section 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</section>
<section class="o-section">
<div class="o-wrapper">
<div class="o-focus">
<h3 class="u-heading u-epsilon">Section 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</section><section class="o-section o-section--lg">
<div class="o-wrapper">
<div class="o-focus">
<h3 class="u-heading u-epsilon">Section 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</section>
<section class="o-section o-section--lg">
<div class="o-wrapper">
<div class="o-focus">
<h3 class="u-heading u-epsilon">Section 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</section><section class="o-section o-section--xl">
<div class="o-wrapper">
<div class="o-focus">
<h3 class="u-heading u-epsilon">Section 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</section>
<section class="o-section o-section--xl">
<div class="o-wrapper">
<div class="o-focus">
<h3 class="u-heading u-epsilon">Section 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet ligula. Pellentesque at eros eget eros luctus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</section>Section Backgrounds
Use any background utility class to add backgrounds.
Section UI 50
What do we do with her? Is there a garbage chute? Trash compactor? Yeah, there is. General, their shields are down! Thank the Maker! Han did it! Send them in! Give Poe full authorization to attack. Black Leader, go to sub-lights. On your call.
Section UI 50
What do we do with her? Is there a garbage chute? Trash compactor? Yeah, there is. General, their shields are down! Thank the Maker! Han did it! Send them in! Give Poe full authorization to attack. Black Leader, go to sub-lights. On your call.
Section UI 50
What do we do with her? Is there a garbage chute? Trash compactor? Yeah, there is. General, their shields are down! Thank the Maker! Han did it! Send them in! Give Poe full authorization to attack. Black Leader, go to sub-lights. On your call.
Section UI 50
What do we do with her? Is there a garbage chute? Trash compactor? Yeah, there is. General, their shields are down! Thank the Maker! Han did it! Send them in! Give Poe full authorization to attack. Black Leader, go to sub-lights. On your call.
Section UI 50
What do we do with her? Is there a garbage chute? Trash compactor? Yeah, there is. General, their shields are down! Thank the Maker! Han did it! Send them in! Give Poe full authorization to attack. Black Leader, go to sub-lights. On your call.
Section UI 50
What do we do with her? Is there a garbage chute? Trash compactor? Yeah, there is. General, their shields are down! Thank the Maker! Han did it! Send them in! Give Poe full authorization to attack. Black Leader, go to sub-lights. On your call.
Section UI 50
What do we do with her? Is there a garbage chute? Trash compactor? Yeah, there is. General, their shields are down! Thank the Maker! Han did it! Send them in! Give Poe full authorization to attack. Black Leader, go to sub-lights. On your call.
<section class="o-section | u-bg-ui-50">
<div class="o-wrapper">
<div class="o-focus o-focus--left">
<h3 class="u-heading u-epsilon">Section UI 50</h3>
<p>What do we do with her? Is there a garbage chute? Trash compactor? Yeah, there is. General, their shields are down! Thank the Maker! Han did it! Send them in! Give Poe full authorization to attack. Black Leader, go to sub-lights. On your call.</p>
</div>
</div>
</section><section class="o-section | u-bg-ui-100">
<div class="o-wrapper">
<div class="o-focus o-focus--left">
<h3 class="u-heading u-epsilon">Section UI 50</h3>
<p>What do we do with her? Is there a garbage chute? Trash compactor? Yeah, there is. General, their shields are down! Thank the Maker! Han did it! Send them in! Give Poe full authorization to attack. Black Leader, go to sub-lights. On your call.</p>
</div>
</div>
</section><section class="o-section | u-bg-ui-200">
<div class="o-wrapper">
<div class="o-focus o-focus--left">
<h3 class="u-heading u-epsilon">Section UI 50</h3>
<p>What do we do with her? Is there a garbage chute? Trash compactor? Yeah, there is. General, their shields are down! Thank the Maker! Han did it! Send them in! Give Poe full authorization to attack. Black Leader, go to sub-lights. On your call.</p>
</div>
</div>
</section><section class="o-section | u-bg-ui-300">
<div class="o-wrapper">
<div class="o-focus o-focus--left">
<h3 class="u-heading u-epsilon">Section UI 50</h3>
<p>What do we do with her? Is there a garbage chute? Trash compactor? Yeah, there is. General, their shields are down! Thank the Maker! Han did it! Send them in! Give Poe full authorization to attack. Black Leader, go to sub-lights. On your call.</p>
</div>
</div>
</section><section class="o-section | u-bg-ui-400">
<div class="o-wrapper">
<div class="o-focus o-focus--left">
<h3 class="u-heading u-epsilon">Section UI 50</h3>
<p>What do we do with her? Is there a garbage chute? Trash compactor? Yeah, there is. General, their shields are down! Thank the Maker! Han did it! Send them in! Give Poe full authorization to attack. Black Leader, go to sub-lights. On your call.</p>
</div>
</div>
</section><section class="o-section | u-bg-ui-500">
<div class="o-wrapper">
<div class="o-focus o-focus--left">
<h3 class="u-heading u-epsilon">Section UI 50</h3>
<p>What do we do with her? Is there a garbage chute? Trash compactor? Yeah, there is. General, their shields are down! Thank the Maker! Han did it! Send them in! Give Poe full authorization to attack. Black Leader, go to sub-lights. On your call.</p>
</div>
</div>
</section><section class="o-section | u-bg-ui-600">
<div class="o-wrapper">
<div class="o-focus o-focus--left">
<h3 class="u-heading u-epsilon">Section UI 50</h3>
<p>What do we do with her? Is there a garbage chute? Trash compactor? Yeah, there is. General, their shields are down! Thank the Maker! Han did it! Send them in! Give Poe full authorization to attack. Black Leader, go to sub-lights. On your call.</p>
</div>
</div>
</section>