FEC Pattern Library

Vertical cards

Vertical cards have an icon above a text element. Since they are large elements within a composition, a neutral background is recommended so that they don’t overwhelm the visual hierarchy.

Refer to horizontal cards for guidance on when and how to best use cards.

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

    <div class="grid grid--4-wide">

        <div class="grid__item">
            <div class="card">
                <a href="/data/elections/senate/WI/2018">
                    <div class="card__image__container">
                        <img class="icon--complex" src="/components/i-elections--primary.svg" alt="Icon representing elections">
                    </div>
                    <div class="card__content">
                        <h3>Elections &raquo;</h3>
                        <p>Find all candidates in the 2018 Wisconsin Senate election</p>
                    </div>
                </a>
            </div>
        </div>

        <div class="grid__item">
            <div class="card">
                <a href="/data/elections/senate/WI/2018">
                    <div class="card__image__container">
                        <img class="icon--complex" src="/components/i-profiles--primary.svg" alt="Icon representing a profile page">
                    </div>
                    <div class="card__content">
                        <h3>Profiles &raquo;</h3>
                        <p>Find candidates or committees in any election</p>
                    </div>
                </a>
            </div>
        </div>

        <div class="grid__item">
            <div class="card">
                <a href="/data/elections/senate/WI/2018">
                    <div class="card__image__container">
                        <img class="icon--complex" src="/components/i-table--primary.svg" alt="Icon representing a data table">
                    </div>
                    <div class="card__content">
                        <h3>Advanced data &raquo;</h3>
                        <p>Search, filter and download data</p>
                    </div>
                </a>
            </div>
        </div>

        <div class="grid__item">
            <div class="card">
                <a href="/data/elections/senate/WI/2018">
                    <div class="card__image__container">
                        <img class="icon--complex" src="/components/i-overviews--primary.svg" alt="Icon of a stylized bar chart">
                    </div>
                    <div class="card__content">
                        <h3>Raising and spending &raquo;</h3>
                        <p>Explore common raising and spending questions with real data</p>
                    </div>
                </a>
            </div>
        </div>

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

  <div class="grid grid--4-wide">

    <div class="grid__item">
      <div class="card">
        <a href="/data/elections/senate/WI/2018">
          <div class="card__image__container">
            <img class="icon--complex" src="/components/i-elections--primary.svg" alt="Icon representing elections">
          </div>
          <div class="card__content">
            <h3>Elections &raquo;</h3>
            <p>Find all candidates in the 2018 Wisconsin Senate election</p>
          </div>
        </a>
      </div>
    </div>

    <div class="grid__item">
      <div class="card">
        <a href="/data/elections/senate/WI/2018">
          <div class="card__image__container">
            <img class="icon--complex" src="/components/i-profiles--primary.svg" alt="Icon representing a profile page">
          </div>
          <div class="card__content">
            <h3>Profiles &raquo;</h3>
            <p>Find candidates or committees in any election</p>
          </div>
        </a>
      </div>
    </div>

    <div class="grid__item">
      <div class="card">
        <a href="/data/elections/senate/WI/2018">
          <div class="card__image__container">
            <img class="icon--complex" src="/components/i-table--primary.svg" alt="Icon representing a data table">
          </div>
          <div class="card__content">
            <h3>Advanced data &raquo;</h3>
            <p>Search, filter and download data</p>
          </div>
        </a>
      </div>
    </div>

    <div class="grid__item">
      <div class="card">
        <a href="/data/elections/senate/WI/2018">
          <div class="card__image__container">
            <img class="icon--complex" src="/components/i-overviews--primary.svg" alt="Icon of a stylized bar chart">
          </div>
          <div class="card__content">
            <h3>Raising and spending &raquo;</h3>
            <p>Explore common raising and spending questions with real data</p>
          </div>
        </a>
      </div>
    </div>

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