Structure

The card pattern is customizable to a number of scenarios and should use the design that will create the optimal experience. All cards in one collection should have the same basic layout and component parts.

The only required elements within a container are the title and body content. The optional elements listed below provide additional information and visual prominence where necessary.

• The container creates the barrier for the card information. It separates a card from other in a collection or, if standalone, from the rest of the elements on the page.
• An image or yellow border bar may be used as a spotlight to draw attention to a card on a busy page. Do not use both an image and a border bar.
• The eyebrow text is used to give secondary or supporting information. Eyebrows use the title 4 text style.
• The Title details what is contained in the card body. Titles use the title 2 text style.
• Body content expands on the card title and uses the default text content variation.
• Cards may have up to two associated actions in the form of buttons and links . A card may only use a primary button if it is standalone and offers the primary action on the page. Otherwise, cards with two actions must use a horizontally stacked default button and text link.

Variations

Eyebrow Text

Header

Card body content is concise and immediately relevant to the card's header.

Action 1Action 2Action 3

Standard

Add and remove elements and classes to customize the attention card to best suit your design. The card container will respond as elements are added and removed.

HTML

Vanilla JS

<div class="c-card">
  <img class="c-card__img" src={pic} alt="Card" />
  <div class="c-card__body">
    <div class="c-card__eyebrow">Eyebrow Text</div>
    <h1 class="c-card__title">Header</h1>
    <p class="c-card__text">
      Card body content is concise and immediately relevant to the
      card's header.
    </p>
    <div class="c-card__button-container">
      <button class="c-card__button--primary">Action 1</button>
      <button class="c-card__button--default">Action 2</button>
      <a href="/#">Action 3</a>
    </div>
  </div>
</div>

Copy

Eyebrow Text

Header

Card body content is concise and immediately relevant to the card's header.

Action 1Action 2

Hero

The hero card variation is a larger, horizontal card that has all possible component parts. The image in a hero card is more prominent as it takes up 50% of the container width. Hero cards are only used as standalones and may only be used at desktop breakpoints. At smaller breakpoints, they convert to standard cards.

HTML

Vanilla JS

<div class="c-card--hero">
  <img class="c-card__img--hero-mobile" src={pic} alt="Card" />
  <div class="c-card__body--hero">
    <div class="c-card__eyebrow">Eyebrow Text</div>
    <h1 class="c-card__title--hero">Header</h1>
    <p class="c-card__text">
      Card body content is concise and immediately relevant to the
      card's header.
    </p>
    <div class="c-card__button-container--hero">
      <button class="c-card__button--primary--hero">Action 1</button>
      <button class="c-card__button--default--hero">Action 2</button>
    </div>
  </div>
  <img class="c-card__img--hero-desktop" src={pic} alt="Card" />
</div>

Copy

Design Environment

Card containers are flexible and margins should adapt to the card size. Use more spacing in between larger cards and unrelated layout elements around them. Use less spacing in between related cards in a collection.

Microcopy

Because of the space restraints inherent in cards, copy should be concise. The relationship between a card's body content, optional eyebrow, title and image should be immediately apparent. Follow the microcopy guidelines in titles, buttons and links for more information.