Card

Cards are used to collect and highlight short pieces of content

When to use this component

To showcase aggregated elements
To support browsing for information rather than close reading
To present content in a simple manner
To provide an entry point to more detailed information
To allow users to quickly scan large sections of content

When not to use this component

When the order content is important, as cards deemphasise the ranking of content

Variations

Top 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.
headingLevel: int = 2: The <hX> heading to use, where the value is one of 2, 3, 4, 5, or 6.
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