FEC Pattern Library

Horizontal cards

Cards act as an entry point to finding more detailed information. They are intended to act as a high visual hierarchy link, and should appear and act clickable.

When to use

  • To display collections of content that are of similar, (but not the same) type

When to consider something else

  • Use a list if the design presents homogeneous content that is less than a few lines. This allows for faster scanning.
  • Use a callout component if the design presents multiple links, and only one card

Guidance

  • A card should be a singular link or provide a limited set of actions
  • Keep the content short and direct
  • Avoid inline links, except if the card uses the card--wide style, which allows for complex text structure. In this case, the card title should be the main entry point link. If necessary, there could be secondary, more specific inline links in the the copy below the card title.
<div class="container" style="padding: 2rem">

    <!-- Smallest horizontal card, primary -->

    .card--horizontal
    <div class="grid grid--4-wide">
        <div class="grid__item">
            <a href="#">
                <aside class="card card--primary card--horizontal">
                    <div class="card__image">
                        <span class="card__icon i-candidate"><span class="u-visually-hidden">Icon representing Candidates</span></span>
                    </div>
                    <div class="card__content">
                        Candidates
                    </div>
                </aside>
            </a>
        </div>

        <div class="grid__item">
            <a href="#">
                <aside class="card card--primary card--horizontal">
                    <div class="card__image">
                        <span class="card__icon i-committee"><span class="u-visually-hidden">Icon representing committees</span></span>
                    </div>
                    <div class="card__content">
                        Committees
                    </div>
                </aside>
            </a>
        </div>

        <div class="grid__item">
            <a href="#">
                <aside class="card card--primary card--horizontal">
                    <div class="card__image">
                        <span class="card__icon i-receipt"><span class="u-visually-hidden">Icon representing raising</span></span>
                    </div>
                    <div class="card__content">
                        Raising
                    </div>
                </aside>
            </a>
        </div>

        <div class="grid__item">
            <a href="#">
                <aside class="card card--primary card--horizontal">
                    <div class="card__image">
                        <span class="card__icon i-disbursement"><span class="u-visually-hidden">Icon representing spending</span></span>
                    </div>
                    <div class="card__content">
                        Spending
                    </div>
                </aside>
            </a>
        </div>
    </div>

    <!-- Alternating background card, primary -->

    .card--alternating-bg
    <div class="grid grid--3-wide">
        <div class="grid__item">
            <a href="#">
                <div class="card card--horizontal card--alternating-bg">
                    <div class="card__image__container card__image__container--primary">
                        <img class="card__image" src="/img/i-elections--primary-contrast.svg" alt="Icon of a document">
                    </div>
                    <div class="card__content">
                        <span class="label">
                            <span class="label heading__pre-title">Election summary</span>
                        </span>
                        Compare all candidates in this election
                    </div>
                </div>
            </a>
        </div>

        <div class="grid__item">
            <a href="#">
                <div class="card card--horizontal card--alternating-bg">
                    <div class="card__image__container card__image__container--primary">
                        <img class="card__image" src="/img/i-elections--primary-contrast.svg" alt="Icon of a document">
                    </div>
                    <div class="card__content">
                        <span class="label">
                            <span class="label heading__pre-title">Election summary</span>
                        </span>
                        Compare all candidates in this election
                    </div>
                </div>
            </a>
        </div>

        <div class="grid__item">
            <a href="#">
                <div class="card card--horizontal card--alternating-bg">
                    <div class="card__image__container card__image__container--primary">
                        <img class="card__image" src="/img/i-elections--primary-contrast.svg" alt="Icon of a document">
                    </div>
                    <div class="card__content">
                        <span class="label">
                            <span class="label heading__pre-title">Election summary</span>
                        </span>
                        Compare all candidates in this election
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- Wide card, primary -->

    .card--wide
    <div class="grid grid--2-wide">
        <div class="grid__item">
            <div class="card card--wide">
                <div class="card__image__container">
                    <img class="card__image" src="/img/i-table--primary-contrast.svg" alt="Icon of a table">
                    <h2 class="card__title"><a href="#">Advanced data &raquo;</a></h2>
                </div>
                <div class="card__content">
                    <h2 class="card__title"><a href="#">Advanced data &raquo;</a></h2>
                    <span>Search, filter and download data</span>
                </div>
            </div>
        </div>

        <div class="grid__item">
            <div class="card card--wide">
                <div class="card__image__container">
                    <img class="card__image" src="/img/i-elections--primary-contrast.svg" alt="Icon representing elections">
                    <h2 class="card__title"><a href="#">Elections by location &raquo;</a></h2>
                </div>
                <div class="card__content">
                    <h2 class="card__title"><a href="#">Elections by location &raquo;</a></h2>
                    <span>Find elections near you&mdash;search by state or ZIP code</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Smallest horizontal card, secondary -->

    .card--horizontal
    <div class="grid grid--4-wide">
        <div class="grid__item">
            <a href="#">
                <aside class="card card--secondary card--horizontal">
                    <div class="card__image">
                        <span class="card__icon i-notebook"><span class="u-visually-hidden">Icon representing a guide</span></span>
                    </div>
                    <div class="card__content">
                        Candidates and their authorized committees
                    </div>
                </aside>
            </a>
        </div>

        <div class="grid__item">
            <a href="#">
                <aside class="card card--secondary card--horizontal">
                    <div class="card__image">
                        <span class="card__icon i-notebook"><span class="u-visually-hidden">Icon representing a guide</span></span>
                    </div>
                    <div class="card__content">
                        Political party committees
                    </div>
                </aside>
            </a>
        </div>

        <div class="grid__item">
            <a href="#">
                <aside class="card card--secondary card--horizontal">
                    <div class="card__image">
                        <span class="card__icon i-notebook"><span class="u-visually-hidden">Icon representing a guide</span></span>
                    </div>
                    <div class="card__content">
                        Corporations and labor organizations
                    </div>
                </aside>
            </a>
        </div>

        <div class="grid__item">
            <a href="#">
                <aside class="card card--secondary card--horizontal">
                    <div class="card__image">
                        <span class="card__icon i-notebook"><span class="u-visually-hidden">Icon representing a guide</span></span>
                    </div>
                    <div class="card__content">
                        Political action committees (PACs)
                    </div>
                </aside>
            </a>
        </div>

    </div>

    <!-- Alternating background card, secondary -->

    .card--alternating-bg
    <div class="grid grid--3-wide">
        <div class="grid__item">
            <a href="#">
                <div class="card card--horizontal card--alternating-bg">
                    <div class="card__image__container card__image__container--secondary">
                        <img class="card__image" src="/img/financial-document-circle.svg" alt="Icon of a document">
                    </div>
                    <div class="card__content">
                        <span class="label">
                            <span class="label heading__pre-title">How to report</span>
                        </span>
                        In-kind contributions
                    </div>
                </div>
            </a>
        </div>

        <div class="grid__item">
            <a href="#">
                <div class="card card--horizontal card--alternating-bg">
                    <div class="card__image__container card__image__container--secondary">
                        <img class="card__image" src="/img/financial-document-circle.svg" alt="Icon of a document">
                    </div>
                    <div class="card__content">
                        <span class="label">
                            <span class="label heading__pre-title">How to report</span>
                        </span>
                        In-kind contributions
                    </div>
                </div>
            </a>
        </div>

        <div class="grid__item">
            <a href="#">
                <div class="card card--horizontal card--alternating-bg">
                    <div class="card__image__container card__image__container--secondary">
                        <img class="card__image" src="/img/financial-document-circle.svg" alt="Icon of a document">
                    </div>
                    <div class="card__content">
                        <span class="label">
                            <span class="label heading__pre-title">How to report</span>
                        </span>
                        In-kind contributions
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- Wide card, secondary -->

    .card--wide
    <div class="grid grid--2-wide">
        <div class="grid__item">
            <div class="card card--wide">
                <div class="card__image__container card__image__container--secondary">
                    <img class="card__image" src="/img/i-calendar--secondary-contrast.svg" alt="Icon of a calendar">
                    <h2 class="card__title"><a href="#">Dates and deadlines &raquo;</a></h2>
                </div>
                <div class="card__content">
                    <h2 class="card__title"><a href="#">Dates and deadlines &raquo;</a></h2>
                    <span>Reporting deadlines, reporting periods and compliance periods</span>
                </div>
            </div>
        </div>

        <div class="grid__item">
            <div class="card card--wide">
                <div class="card__image__container card__image__container--secondary">
                    <img class="card__image" src="/img/i-document--secondary-contrast.svg" alt="Icon of a document">
                    <h2 class="card__title"><a href="#">Forms &raquo;</a></h2>
                </div>
                <div class="card__content">
                    <h2 class="card__title"><a href="#">Forms &raquo;</a></h2>
                    <span>All FEC registration reporting and forms</span>
                </div>
            </div>
        </div>
    </div>

</div>
 
<div class="container" style="padding: 2rem">

<!-- Smallest horizontal card, primary -->

.card--horizontal
    <div class="grid grid--4-wide">
      <div class="grid__item">
      <a href="#">
        <aside class="card card--primary card--horizontal">
          <div class="card__image">
           <span class="card__icon i-candidate"><span class="u-visually-hidden">Icon representing Candidates</span></span>
          </div>
          <div class="card__content">
           Candidates
          </div>
        </aside>
      </a>
      </div>

      <div class="grid__item">
      <a href="#">
        <aside class="card card--primary card--horizontal">
          <div class="card__image">
           <span class="card__icon i-committee"><span class="u-visually-hidden">Icon representing committees</span></span>
          </div>
          <div class="card__content">
           Committees
          </div>
        </aside>
      </a>
      </div>

      <div class="grid__item">
      <a href="#">
        <aside class="card card--primary card--horizontal">
          <div class="card__image">
           <span class="card__icon i-receipt"><span class="u-visually-hidden">Icon representing raising</span></span>
          </div>
          <div class="card__content">
           Raising
          </div>
        </aside>
      </a>
      </div>

      <div class="grid__item">
      <a href="#">
        <aside class="card card--primary card--horizontal">
          <div class="card__image">
           <span class="card__icon i-disbursement"><span class="u-visually-hidden">Icon representing spending</span></span>
          </div>
          <div class="card__content">
           Spending
          </div>
        </aside>
      </a>
      </div>
  </div>

<!-- Alternating background card, primary -->

.card--alternating-bg
<div class="grid grid--3-wide">
  <div class="grid__item">
    <a href="#">
      <div class="card card--horizontal card--alternating-bg">
        <div class="card__image__container card__image__container--primary">
            <img class="card__image" src="/img/i-elections--primary-contrast.svg" alt="Icon of a document">
        </div>
        <div class="card__content">
          <span class="label">
              <span class="label heading__pre-title">Election summary</span>
          </span>
          Compare all candidates in this election
        </div>
      </div>
    </a>
  </div>

  <div class="grid__item">
    <a href="#">
      <div class="card card--horizontal card--alternating-bg">
        <div class="card__image__container card__image__container--primary">
            <img class="card__image" src="/img/i-elections--primary-contrast.svg" alt="Icon of a document">
        </div>
        <div class="card__content">
          <span class="label">
              <span class="label heading__pre-title">Election summary</span>
          </span>
          Compare all candidates in this election
        </div>
      </div>
    </a>
  </div>

  <div class="grid__item">
    <a href="#">
      <div class="card card--horizontal card--alternating-bg">
        <div class="card__image__container card__image__container--primary">
            <img class="card__image" src="/img/i-elections--primary-contrast.svg" alt="Icon of a document">
        </div>
        <div class="card__content">
          <span class="label">
              <span class="label heading__pre-title">Election summary</span>
          </span>
          Compare all candidates in this election
        </div>
      </div>
    </a>
  </div>
</div>


<!-- Wide card, primary -->

.card--wide
  <div class="grid grid--2-wide">
    <div class="grid__item">
        <div class="card card--wide">
          <div class="card__image__container">
            <img class="card__image" src="/img/i-table--primary-contrast.svg" alt="Icon of a table">
            <h2 class="card__title"><a href="#">Advanced data &raquo;</a></h2>
          </div>
          <div class="card__content">
            <h2 class="card__title"><a href="#">Advanced data &raquo;</a></h2>
            <span>Search, filter and download data</span>
          </div>
        </div>
    </div>

    <div class="grid__item">
        <div class="card card--wide">
          <div class="card__image__container">
            <img class="card__image" src="/img/i-elections--primary-contrast.svg" alt="Icon representing elections">
            <h2 class="card__title"><a href="#">Elections by location &raquo;</a></h2>
          </div>
          <div class="card__content">
            <h2 class="card__title"><a href="#">Elections by location &raquo;</a></h2>
            <span>Find elections near you&mdash;search by state or ZIP code</span>
          </div>
        </div>
    </div>
  </div>


  <!-- Smallest horizontal card, secondary -->

  .card--horizontal
    <div class="grid grid--4-wide">
        <div class="grid__item">
        <a href="#">
          <aside class="card card--secondary card--horizontal">
            <div class="card__image">
             <span class="card__icon i-notebook"><span class="u-visually-hidden">Icon representing a guide</span></span>
            </div>
            <div class="card__content">
             Candidates and their authorized committees
            </div>
          </aside>
        </a>
        </div>

        <div class="grid__item">
        <a href="#">
          <aside class="card card--secondary card--horizontal">
            <div class="card__image">
             <span class="card__icon i-notebook"><span class="u-visually-hidden">Icon representing a guide</span></span>
            </div>
            <div class="card__content">
             Political party committees
            </div>
          </aside>
        </a>
        </div>

        <div class="grid__item">
        <a href="#">
          <aside class="card card--secondary card--horizontal">
            <div class="card__image">
             <span class="card__icon i-notebook"><span class="u-visually-hidden">Icon representing a guide</span></span>
            </div>
            <div class="card__content">
             Corporations and labor organizations
            </div>
          </aside>
        </a>
        </div>

        <div class="grid__item">
        <a href="#">
          <aside class="card card--secondary card--horizontal">
            <div class="card__image">
             <span class="card__icon i-notebook"><span class="u-visually-hidden">Icon representing a guide</span></span>
            </div>
            <div class="card__content">
             Political action committees (PACs)
            </div>
          </aside>
        </a>
        </div>

      </div>

  <!-- Alternating background card, secondary -->

  .card--alternating-bg
    <div class="grid grid--3-wide">
      <div class="grid__item">
        <a href="#">
          <div class="card card--horizontal card--alternating-bg">
            <div class="card__image__container card__image__container--secondary">
                <img class="card__image" src="/img/financial-document-circle.svg" alt="Icon of a document">
            </div>
            <div class="card__content">
              <span class="label">
                  <span class="label heading__pre-title">How to report</span>
              </span>
              In-kind contributions
            </div>
          </div>
        </a>
      </div>

      <div class="grid__item">
        <a href="#">
          <div class="card card--horizontal card--alternating-bg">
            <div class="card__image__container card__image__container--secondary">
                <img class="card__image" src="/img/financial-document-circle.svg" alt="Icon of a document">
            </div>
            <div class="card__content">
              <span class="label">
                  <span class="label heading__pre-title">How to report</span>
              </span>
              In-kind contributions
            </div>
          </div>
        </a>
      </div>

      <div class="grid__item">
        <a href="#">
          <div class="card card--horizontal card--alternating-bg">
            <div class="card__image__container card__image__container--secondary">
                <img class="card__image" src="/img/financial-document-circle.svg" alt="Icon of a document">
            </div>
            <div class="card__content">
              <span class="label">
                  <span class="label heading__pre-title">How to report</span>
              </span>
              In-kind contributions
            </div>
          </div>
        </a>
      </div>
    </div>


  <!-- Wide card, secondary -->

  .card--wide
    <div class="grid grid--2-wide">
      <div class="grid__item">
          <div class="card card--wide">
            <div class="card__image__container card__image__container--secondary">
              <img class="card__image" src="/img/i-calendar--secondary-contrast.svg" alt="Icon of a calendar">
              <h2 class="card__title"><a href="#">Dates and deadlines &raquo;</a></h2>
            </div>
            <div class="card__content">
              <h2 class="card__title"><a href="#">Dates and deadlines &raquo;</a></h2>
              <span>Reporting deadlines, reporting periods and compliance periods</span>
            </div>
          </div>
      </div>

      <div class="grid__item">
          <div class="card card--wide">
            <div class="card__image__container card__image__container--secondary">
              <img class="card__image" src="/img/i-document--secondary-contrast.svg" alt="Icon of a document">
              <h2 class="card__title"><a href="#">Forms &raquo;</a></h2>
            </div>
            <div class="card__content">
              <h2 class="card__title"><a href="#">Forms &raquo;</a></h2>
              <span>All FEC registration reporting and forms</span>
            </div>
          </div>
      </div>
    </div>



</div>
 
/* No context defined. */
  • Handle: @horizontal-cards
  • Preview:
  • Filesystem Path: components/02-components/cards/01-horizontal-cards/horizontal-cards.html