FEC Pattern Library

Callout: Primary

Callouts allow us to put a container around complex structured content or a group of related links. Use a callout when you need to provide a single main link with supplementary information, which can include more minor related links.

This component is styled in a similar way to a card.

<div class="callout callout--primary">
    <div class="callout__content">
        <h4 class="callout__title">
            <a href="#">Committee name</a>
        </h4>
        <span class="callout__subtitle">Principal campaign committee</span>
        <span class="callout__subtitle t-block">2008 - 2012</span>
    </div>
    <div class="callout__action">
        <ul class="callout__sublinks">
            <li><a href="#">Money received</a></li>
            <li><a href="#">Money spent</a></li>
            <li><a href="#">Reports filed</a></li>
        </ul>
    </div>
</div>
 
<div class="callout {{modifier}}">
  <div class="callout__content">
    <h4 class="callout__title">
      <a href="#">Committee name</a>
    </h4>
    <span class="callout__subtitle">Principal campaign committee</span>
    <span class="callout__subtitle t-block">2008 - 2012</span>
  </div>
  <div class="callout__action">
    <ul class="callout__sublinks">
      <li><a href="#">Money received</a></li>
      <li><a href="#">Money spent</a></li>
      <li><a href="#">Reports filed</a></li>
    </ul>
  </div>
</div>
 
{
  "modifier": "callout--primary"
}