Skip to main content

Card

Cards are a flexible container for standout content with a range of configurable options for headers and footers, images and calls to action.

Cards can be sized and arranged using the common grid classes and respond well at small screen widths.

Card Title

This is the card body, it should be helpful and descriptive.

Call to Action

Basic usage​

<div class="card">
  <div class="card__body">
    <h1 class="card__title">Card Title</h1>
    <p>This is the card body, it should be helpful and descriptive.</p>
    <a href="#cta" class="btn btn--primary">Call to Action</a>
  </div>
</div>

Card components​

Body​

At its most basic, a card can contain just a body.

This is the card body, it should be helpful and descriptive.

<div class="card">
  <div class="card__body">
    <p>This is the card body, it should be helpful and descriptive.</p>
  </div>
</div>

Headers and footers​

Add an optional header and/or footer within a card, you can choose whether or not to also include a card title.

tip

The card header can use any heading level or a regular inline element like span but it will maintain the same text size, you should choose the most appropriate element to mark up your header based on the context of your UI

Card Heading

This is the card body, it should be helpful and descriptive.

Card linkAnother link

Card footer

<div class="card">
  <div class="card__header">
    <h1 class="card__heading">Card Heading</h1>
  </div>
  <div class="card__body">
    <p>This is the card body, it should be helpful and descriptive.</p>
    <a href="#cta-one" class="card-link">Card link</a>
    <a href="#cta-two" class="card-link">Another link</a>
  </div>
  <div class="card__footer muted">
    <p>Card footer</p>
  </div>
</div>

Titles, text and links​

A card can contain a .card__title using a heading element within the body. Like headers you should use the most approriate element based on your context.

Links using the .card-link class will be spaced apart slightly.

Card Title

This is the card body, it should be helpful and descriptive.

Card linkAnother link
<div class="card">
  <div class="card__body">
    <h1 class="card__title">Card Title</h1>
    <p>This is the card body, it should be helpful and descriptive.</p>
    <a href="#cta-one" class="card-link">Card link</a>
    <a href="#cta-two" class="card-link">Another link</a>
  </div>
</div>

Images​

Images can be added to the top of a card, they will be automatically made to respond to the card width.

Use .card--full-bleed on the .card to make the image cover the default border of the card.

Normal

The image will be contained within the cards default border.

Card linkAnother link

Full bleed

This card uses .card--full-bleed, the difference is subtle.

Card linkAnother link

Grid sizing​

Cards will be 100% width by default and can be modified using grid classes. Use .g-row divs to organise cards into rows until we get fancier with flexbox.

Apply a grid width to a card with class="card g-col--6" (where 6 is the number of columns).

Card Title

This card uses six columns

Call to Action

Card Title

This card uses 10 columns

Call to Action

Centering card contents​

Use class="card u-text-align-center" to make an entire card centered.

Card Heading

Card Title

This is the card body, it should be helpful and descriptive.

Card linkAnother link

Card footer