FEC Pattern Library

Slabs

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
<!-- Primary -->
<div class="slab slab--primary" style="margin-top: 2rem">
    <div class="container">
        <h1>Heading in a slab</h1>
        This is a slab <a>with a link</a>
    </div>
</div>


<!-- Secondary -->
<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>


<!-- Dark -->
<div class="slab slab--dark" style="margin-top: 2rem">
    <div class="container">
        <h1>Heading in a slab</h1>
        This is a slab <a>with a link</a>
    </div>
</div>


<!-- Neutral -->
<div class="slab slab--neutral" 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>
 
/* Primary */
{
  "modifier": "slab--primary"
}


/* Secondary */
{
  "modifier": "slab--secondary"
}


/* Dark */
{
  "modifier": "slab--dark"
}


/* Neutral */
{
  "modifier": "slab--neutral"
}