FEC Pattern Library

Callout

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.

<!-- Base -->
<div class="callout callout">
    <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>


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


<!-- Secondary -->
<div class="callout callout--secondary">
    <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>
 
/* Base */
{
  "modifier": "callout"
}


/* Primary */
{
  "modifier": "callout--primary"
}


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