Card — Pattern Library

Example

Code sample

<div class="card">
  <h4 class="heading" data-scheme="section">
    Primary connection
  </h4>
  <div class="content">
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p>
  </div>
  <div class="call-to-action">
    <a href="#" class="button" data-scheme="secondary" data-icon="arrow-right" data-mode="icon-after" data-size="small">
      Get a quote
    </a>
  </div>
</div>

Notes

A card is comprised of (at most) 4 distinct sections:
1. A banner image (using the <picture> element)
2. A heading (using a block-level heading or smaller)
3. A content block that can hold arbitrary content
4. A Call-to-action element (if the card is 'interactive' - see below)
The Image and Product card variants can be made interactive, by using the anchor element (<a>) with the usual attributes.
An 'interactive' card MUST NOT have any anchors inside its content - this will break the HTML used to construct these types of cards.
Cards are intended to be used in a 2-4 column layout.
Cards are intended to match their peers when it comes to image sizes/ratios, and number of distinct sections.
If a non-interactive (e.g. plain) card contains a button in the call-to-action block, then an optional alternate alignment mode is available, by using data-mode="alternate". This will right-align the button.
Cards inherit a container's background colour, so avoid using these in inverted-themed containers.
Card background colours can be manually adjusted using the data-theme="…" variants mentioned below.

Details

Pattern scope:

Molecule – A combination of disparate Atoms

Relevant assets:

Stylesheets:

Shared stylesheets [See index.css]
/css/patterns/card.css

Variants

Mode: Image

A borderless card that prioritises showing off an image

Example

Open type in a new window

Code sample

<div class="card" data-mode="image">
  <picture>
    <source srcset="https://placehold.co/800x267/333333/CCFFFF/webp" media="(min-width: 400px)" type="image/webp">
    <img src="https://placehold.co/600x200/000000/FFFFFF/webp" width="300" height="100" alt>
  </picture>
  <h4 class="heading" data-scheme="block">
    Primary connection
  </h4>
  <div class="content">
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p> 
  </div>
</div>

Notes

The only mandatory section in this card variant is the <picture> element. Using this setup in a layout will allow you to create tiles of images.

Mode: Product

An interactive card that insets the image and provides space for a call-to-action link.

Example

Open type in a new window

Code sample

<div class="card" data-mode="product">
  <picture data-scheme="soften">
    <source srcset="https://placehold.co/900x600/333333/CCFFFF/webp" media="(min-resolution: 3x)" type="image/webp">
    <img src="https://placehold.co/600x400/000000/FFFFFF/webp" width="300" height="200" alt>
  </picture>
  <div class="content">
    <p>…content goes here…</p>
  </div>
  <a class="call-to-action" href="#">
    Get a quote
  </a>
</div>

Notes

This card MUST NOT contain any links or buttons in its content, as the whole card is meant to be interactive.
This variant is typically used with the Image/Soften variant.

Mode: plain

Removes the border and reduces the large spacing for a default card.

Example

Open type in a new window

Code sample

<div class="card" data-mode="plain">
  <h4 class="heading" data-scheme="block" data-icon="stars" data-mode="icon-above">
    All star support
  </h4>
  <div class="content">
    <p>
      <img src="https://placehold.co/400x400/000000/FFFFFF/webp" width="200" height="200" alt>
    </p>
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p>
  </div>
  <div class="call-to-action" data-mode="alternate">
    <a href="#" class="button" data-size="small" data-scheme="secondary" data-icon="arrow-right" data-mode="icon-after">Go</a>
  </div>
</div>

Notes

It's up to you to include whatever images you want, and their sizes
If you do use an image, please provide a double-resolution source by default
This card variant doesn't require equally-sized banner images. Smaller images will align themselves to the bottom of their row when used in a layout.
These cards work great with block-level headings that use icons above them

Mode: shadow

Adds a dropshadow around the card.

Example

Open type in a new window

Code sample

<div class="card" data-mode="shadow">
  <h4 class="heading" data-scheme="section">
    Primary connection
  </h4>
  <div class="content">
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p>
  </div>
  <div class="call-to-action">
    <a href="#" class="button" data-scheme="secondary" data-icon="arrow-right" data-mode="icon-after" data-size="small">
      Get a quote
    </a>
  </div>
</div>

Theme: Default

Sets the background colour of the card to white

Example

Open type in a new window

Code sample

<div class="container" data-theme="glow">
  <a class="card" href="#" data-mode="product" data-theme="default">
    <picture data-scheme="soften">
      <source srcset="https://placehold.co/900x600/333333/CCFFFF/webp" media="(min-resolution: 3x)" type="image/webp">
      <img src="https://placehold.co/600x400/000000/FFFFFF/webp" width="300" height="200" alt>
    </picture>
    <div class="content">
      <p>…content goes here…</p>
    </div>
    <div class="call-to-action">
      Get a quote
    </div>
  </a>
</div>

Notes

Use the data-theme="default" attribute

Theme: Alternate

Sets the background colour of the card to the subtle grey colour

Example

Open type in a new window

Code sample

<div class="container" data-theme="glow">
  <a class="card" href="#" data-mode="product" data-theme="alternate">
    <picture data-scheme="soften">
      <source srcset="https://placehold.co/900x600/333333/CCFFFF/webp" media="(min-resolution: 3x)" type="image/webp">
      <img src="https://placehold.co/600x400/000000/FFFFFF/webp" width="300" height="200" alt>
    </picture>
    <div class="content">
      <p>…content goes here…</p>
    </div>
    <div class="call-to-action">
      Get a quote
    </div>
  </a>
</div>

Notes

Use the data-theme="alternate" attribute

Theme: Stripped

Removes the background colour from the card

Example

Open type in a new window

Code sample

<div class="container" data-theme="glow">
  <a class="card" href="#" data-mode="product" data-theme="stripped">
    <picture data-scheme="soften">
      <source srcset="https://placehold.co/900x600/333333/CCFFFF/webp" media="(min-resolution: 3x)" type="image/webp">
      <img src="https://placehold.co/600x400/000000/FFFFFF/webp" width="300" height="200" alt>
    </picture>
    <div class="content">
      <p>…content goes here…</p>
    </div>
    <div class="call-to-action">
      Get a quote
    </div>
  </a>
</div>

Notes

Use the data-theme="stripped" attribute

Spacing: none

Removes the padding from the card

Example

Open type in a new window

Code sample

<div class="container" data-theme="glow">
  <div class="card" data-mode="plain" data-spacing="none" data-theme="stripped">
    <picture data-scheme="soften">
      <source srcset="https://placehold.co/900x600/333333/CCFFFF/webp" media="(min-resolution: 3x)" type="image/webp">
      <img src="https://placehold.co/600x400/000000/FFFFFF/webp" width="300" height="200" alt>
    </picture>
    <div class="content">
      <p>…content goes here…</p>
    </div>
  </div>
</div>

Notes

Use the data-spacing="none" attribute
Can only be used with Plain and Image variants
Can't be used with an interactive card