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.

Variations

Image

open this example in its own window

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida odio enim, eget congue neque dignissim nec.

<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">Lorem ipsum</h2>

      <div class="card-text">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida
          odio enim, eget congue neque dignissim nec.
        </p>
      </div>
    </div>
  </div>
</div>

Options to the card() macro

heading: string|null=null: The human-readable card heading.
body: string|null=null: The Card's HTML body.
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': 'Lorem ipsum',
    'body': '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida odio enim, eget congue neque dignissim nec.</p>' | safe,
    'image': 'https://www.nihr.ac.uk/images/health-and-social-care-professionals/engagement-and-participation/people-at-meeting.jpg'
}) }}

Heading only