Card

Cards are used to collect and highlight short pieces of content

Intended behaviour

Cards allow for the display of a wide variety of content using a range of display options.

Cards best support browsing for information rather than close reading.

When to use this component

Browsing is a large part of interaction, and users want to be able to quickly scan large portions of content and dive deep into their interests. Users can experience difficulty browsing text-heavy sites as displaying extra details for each item can clutter the screen and prevent efficient scanning.

Cards are great for showcasing aggregated elements whose size or supported actions vary. Each card serves as an entry point to more detailed information, so it shouldn't be overloaded with extraneous information or actions.

Cards allow you to present a heavy dose of content in a small and digestible manner: they divide all available content into meaningful sections, present a summary and optionally a link to additional details. A single card is a container that displays various parts of related information, from which users can get even more information.

When not to use this component

Strict order. When you have a strict order in which you want users to scan the content. Card layouts typically deemphasize ranking of content as they don't provide obvious information about the order in which content should be viewed on a page. As a result, there's little hierarchy in the visual information presented. Cards can make all content look similar, which can make it hard (or even impossible) for users to easily discern the ranking importance of content.

Examples

Image

open this example in its own window

Card Title

This is a card with an image above and supporting text below.

• HTML
• Nunjucks

<div class="col-md">
  <div class="card h-100">
    <img
      src="https://www.nihr.ac.uk/images/health-and-social-care-professionals/engagement-and-participation/people-at-meeting.jpg"
      class="card-img-top"
      alt=""
    />

    <div class="card-body d-flex flex-column">
      <h2 class="card-title h3 heading-underline heading-underline--coral">
        Card Title
      </h2>

      <p class="card-text">
        This is a card with an image above and supporting text below.
      </p>
    </div>
  </div>
</div>

Macro options

Options to the card() macro

heading: string|null=null

The human-readable card heading.

content: string|null=null

The human-readable content of the card.

image: string|null = null

Any image's src attribute value.

backgroundColor: 'white'|'navy' = 'white'

The card's background color.

{% from 'macros/component/card.html' import card %}

{{ card({
    'heading': 'Card Title',
    'content': 'This is a card with an image above and supporting text below.',
    'image': 'https://www.nihr.ac.uk/images/health-and-social-care-professionals/engagement-and-participation/people-at-meeting.jpg'
}) }}

Heading only

<div class="col-md">
  <div class="card h-100">
    <div class="card-body d-flex flex-column">
      <h2 class="card-title h3 heading-underline heading-underline--coral">
        Card Title
      </h2>

      <p class="card-text">This is a card with supporting text below.</p>
    </div>
  </div>
</div>

{% from 'macros/component/card.html' import card %}

{{ card({
    'heading': 'Card Title',
    'content': 'This is a card with supporting text below.'
}) }}