FEC Pattern Library

Slabs: Secondary

Slabs are full screen-width containers with a solid background color. Any type of content can be placed within a slab—there is no set structure for what’s inside.

When to use

  • As a visual device to create a strong visual break or separation between different types of page content
  • Toward the bottom of the page, with a .neutral background to create a separate space for related articles, resources, or legal disclaimers
<div class="slab slab--secondary" style="margin-top: 2rem">
    <div class="container">
        <h1>Heading in a slab</h1>
        This is a slab <a>with a link</a>
    </div>
</div>
 
<div class="slab {{ modifier }}" style="margin-top: 2rem">
  <div class="container">
    <h1>Heading in a slab</h1>
    This is a slab <a>with a link</a>
  </div>
</div>
 
{
  "modifier": "slab--secondary"
}