Skip to main content

Content presentation – Card

Use a card to visually group related content and actions to help users do what they need to more quickly.

Information: Version 10

Card updated in August 2025

See breaking code updates to card in version 10

When to use a card

Use a card to visually group related content and actions to help users do what they need to more quickly. You can group several cards together.

If you are grouping cards to create a hub page (sometimes called a landing page), use the hub page pattern.

When not to use a card

Do not use a card to highlight content on a page of long form content.

Before using a card, consider using:

How to use a card

There are two types of cards:

Both cards can be clickable or non-clickable.

A card can include different elements, such as:

  • a heading
  • text
  • a link or links

You can also add an image or add actions. If you include a link, the link should mirror the heading of the page it links to.

For clickable cards, avoid wrapping the entire card in an anchor tag as this can be a difficult experience for screen reader users.

Keep the card short so it is easy to scan for relevant and actionable information.

Primary card

Primary cards are more visually prominent than secondary cards.

Primary card clickable

Open this example in a new tab: card primary card clickable 
<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">
          <span role="text">
            <span class="nhsuk-u-visually-hidden">Applicants:</span> 91
          </span>
        </h2>
        <a href="#/applicants" class="nhsuk-card__link">Applicants</a>

      </div>
    </div>
  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the card.
heading string Required. Text to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingHtml string Required. HTML to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingClasses string Classes to add to the card heading.
headingSize string Size of the heading – "xss", "xs", "s", "m", "l" or "xl".
headingLevel integer Optional heading level for the card heading. Defaults to 2.
headingId string Optional id attribute for the card heading.
headingVisuallyHiddenText string Optional visually hidden prefix used before the heading.
href string The value of the card link href attribute.
clickable boolean If set to true, then the whole card will become a clickable card variant.
variant string Optional variant of card – "feature", "primary", "secondary", "warning", "non-urgent", "urgent" or "emergency".
type string Deprecated in 10.4.0

Optional type of care card – "non-urgent", "urgent" or "emergency". Replaced by the variant option.
feature boolean Deprecated in 10.4.0

If set to true, then the card will become a feature card variant.
primary boolean Deprecated in 10.4.0

If set to true, the card will become a primary card variant (with chevron).
secondary boolean Deprecated in 10.4.0

If set to true, the card will become a secondary card variant.
warning boolean Deprecated in 10.4.0

If set to true, then the card will become a warning card variant used by the warning callout.
imgURL string Deprecated in 10.3.0

The URL of the image in the card. Replaced by the image.src option.
imgALT string Deprecated in 10.3.0

The alternative text of the image in the card. Replaced by the image.alt option.
image object Can be used to add an image to the card component. See macro options for image.
description string Text description within the card content. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string HTML to use within the card content. If descriptionHtml is provided, the description argument will be ignored.
actions object Can be used to add actions to the card component. See macro options for actions.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire card component in a call block.
classes string Classes to add to the card.
attributes object HTML attributes (for example data attributes) to add to the card.
Options for image object
Name Type Description
src string Required. The URL of the image in the card.
alt string The alternative text of the image in the card.
html string HTML to use for the image content. If html is provided, the src and alt arguments will be ignored.
Options for actions object
Name Type Description
items array Array of actions as links for use in the card component. See macro options for actions items.
classes string Classes to add to the actions wrapper.
Options for actions items array objects
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "card/macro.njk" import card %}


<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
    {% call card({
      clickable: true,
      heading: "91",
      headingClasses: "nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1",
      headingVisuallyHiddenText: "Applicants"
    }) %}
      <a href="#/applicants" class="nhsuk-card__link">Applicants</a>
    {% endcall %}
  </li>
</ul>

Primary card with chevron

The chevron icon on this primary card makes it even more prominent.

There is only a clickable version of this card.

Read about how to use primary cards with chevrons in the hub page pattern.

Open this example in a new tab: card primary card 
<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable nhsuk-card--primary">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">GPs</a>
        </h2>
        <p class="nhsuk-card__description">About GP services, including how to find and register with a local GP and how to book an appointment</p>
        <svg class="nhsuk-icon nhsuk-icon--chevron-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-.3 5.8a1 1 0 1 0-1.5 1.4l2.9 2.8-2.9 2.8a1 1 0 0 0 1.5 1.4l3.5-3.5c.4-.4.4-1 0-1.4Z" />
        </svg>
      </div>
    </div>

  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the card.
heading string Required. Text to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingHtml string Required. HTML to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingClasses string Classes to add to the card heading.
headingSize string Size of the heading – "xss", "xs", "s", "m", "l" or "xl".
headingLevel integer Optional heading level for the card heading. Defaults to 2.
headingId string Optional id attribute for the card heading.
headingVisuallyHiddenText string Optional visually hidden prefix used before the heading.
href string The value of the card link href attribute.
clickable boolean If set to true, then the whole card will become a clickable card variant.
variant string Optional variant of card – "feature", "primary", "secondary", "warning", "non-urgent", "urgent" or "emergency".
type string Deprecated in 10.4.0

Optional type of care card – "non-urgent", "urgent" or "emergency". Replaced by the variant option.
feature boolean Deprecated in 10.4.0

If set to true, then the card will become a feature card variant.
primary boolean Deprecated in 10.4.0

If set to true, the card will become a primary card variant (with chevron).
secondary boolean Deprecated in 10.4.0

If set to true, the card will become a secondary card variant.
warning boolean Deprecated in 10.4.0

If set to true, then the card will become a warning card variant used by the warning callout.
imgURL string Deprecated in 10.3.0

The URL of the image in the card. Replaced by the image.src option.
imgALT string Deprecated in 10.3.0

The alternative text of the image in the card. Replaced by the image.alt option.
image object Can be used to add an image to the card component. See macro options for image.
description string Text description within the card content. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string HTML to use within the card content. If descriptionHtml is provided, the description argument will be ignored.
actions object Can be used to add actions to the card component. See macro options for actions.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire card component in a call block.
classes string Classes to add to the card.
attributes object HTML attributes (for example data attributes) to add to the card.
Options for image object
Name Type Description
src string Required. The URL of the image in the card.
alt string The alternative text of the image in the card.
html string HTML to use for the image content. If html is provided, the src and alt arguments will be ignored.
Options for actions object
Name Type Description
items array Array of actions as links for use in the card component. See macro options for actions items.
classes string Classes to add to the actions wrapper.
Options for actions items array objects
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "card/macro.njk" import card %}

<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">
    {{ card({
      primary: true,
      clickable: true,
      href: "#",
      heading: "GPs",
      headingSize: "m",
      description: "About GP services, including how to find and register with a local GP and how to book an appointment"
    }) }}
  </li>
</ul>

Primary card non-clickable

Use the non-clickable card when you are using more than 1 link.

Open this example in a new tab: card primary card non clickable 
<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">
    <div class="nhsuk-card">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="/#">Berrylands Pharmacy</a>
        </h2>
        <p>Ewell Road, Surbiton, KT6 6EZ<br />
          Phone: <a href="#">01111 111 111</a><br />
          Email: <a href="#">organisation@nhs.net</a></p>
        <p><a href="#">Get directions (opens in Google Maps)</a></p>
      </div>
    </div>

  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the card.
heading string Required. Text to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingHtml string Required. HTML to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingClasses string Classes to add to the card heading.
headingSize string Size of the heading – "xss", "xs", "s", "m", "l" or "xl".
headingLevel integer Optional heading level for the card heading. Defaults to 2.
headingId string Optional id attribute for the card heading.
headingVisuallyHiddenText string Optional visually hidden prefix used before the heading.
href string The value of the card link href attribute.
clickable boolean If set to true, then the whole card will become a clickable card variant.
variant string Optional variant of card – "feature", "primary", "secondary", "warning", "non-urgent", "urgent" or "emergency".
type string Deprecated in 10.4.0

Optional type of care card – "non-urgent", "urgent" or "emergency". Replaced by the variant option.
feature boolean Deprecated in 10.4.0

If set to true, then the card will become a feature card variant.
primary boolean Deprecated in 10.4.0

If set to true, the card will become a primary card variant (with chevron).
secondary boolean Deprecated in 10.4.0

If set to true, the card will become a secondary card variant.
warning boolean Deprecated in 10.4.0

If set to true, then the card will become a warning card variant used by the warning callout.
imgURL string Deprecated in 10.3.0

The URL of the image in the card. Replaced by the image.src option.
imgALT string Deprecated in 10.3.0

The alternative text of the image in the card. Replaced by the image.alt option.
image object Can be used to add an image to the card component. See macro options for image.
description string Text description within the card content. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string HTML to use within the card content. If descriptionHtml is provided, the description argument will be ignored.
actions object Can be used to add actions to the card component. See macro options for actions.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire card component in a call block.
classes string Classes to add to the card.
attributes object HTML attributes (for example data attributes) to add to the card.
Options for image object
Name Type Description
src string Required. The URL of the image in the card.
alt string The alternative text of the image in the card.
html string HTML to use for the image content. If html is provided, the src and alt arguments will be ignored.
Options for actions object
Name Type Description
items array Array of actions as links for use in the card component. See macro options for actions items.
classes string Classes to add to the actions wrapper.
Options for actions items array objects
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "card/macro.njk" import card %}

{% set cardDescriptionHtml %}
  <p>Ewell Road, Surbiton, KT6 6EZ<br />
  Phone: <a href="#">01111 111 111</a><br />
  Email: <a href="#">organisation@nhs.net</a></p>
  <p><a href="#">Get directions (opens in Google Maps)</a></p>
{% endset %}

<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">
    {{ card({
      clickable: false,
      heading: "Berrylands Pharmacy",
      headingSize: "m",
      href: "/#",
      descriptionHtml: cardDescriptionHtml
    }) }}
  </li>
</ul>

Secondary card

The secondary card has less visual impact than the primary cards.

When used with other cards, use the secondary card to group less important content or actions.

Secondary card clickable

This card is also used in the hub page pattern.

Open this example in a new tab: card secondary card 
<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable nhsuk-card--secondary">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">Services A to Z</a>
        </h2>
        <p class="nhsuk-card__description">Use our service finder to find other health services</p>
      </div>
    </div>

  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the card.
heading string Required. Text to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingHtml string Required. HTML to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingClasses string Classes to add to the card heading.
headingSize string Size of the heading – "xss", "xs", "s", "m", "l" or "xl".
headingLevel integer Optional heading level for the card heading. Defaults to 2.
headingId string Optional id attribute for the card heading.
headingVisuallyHiddenText string Optional visually hidden prefix used before the heading.
href string The value of the card link href attribute.
clickable boolean If set to true, then the whole card will become a clickable card variant.
variant string Optional variant of card – "feature", "primary", "secondary", "warning", "non-urgent", "urgent" or "emergency".
type string Deprecated in 10.4.0

Optional type of care card – "non-urgent", "urgent" or "emergency". Replaced by the variant option.
feature boolean Deprecated in 10.4.0

If set to true, then the card will become a feature card variant.
primary boolean Deprecated in 10.4.0

If set to true, the card will become a primary card variant (with chevron).
secondary boolean Deprecated in 10.4.0

If set to true, the card will become a secondary card variant.
warning boolean Deprecated in 10.4.0

If set to true, then the card will become a warning card variant used by the warning callout.
imgURL string Deprecated in 10.3.0

The URL of the image in the card. Replaced by the image.src option.
imgALT string Deprecated in 10.3.0

The alternative text of the image in the card. Replaced by the image.alt option.
image object Can be used to add an image to the card component. See macro options for image.
description string Text description within the card content. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string HTML to use within the card content. If descriptionHtml is provided, the description argument will be ignored.
actions object Can be used to add actions to the card component. See macro options for actions.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire card component in a call block.
classes string Classes to add to the card.
attributes object HTML attributes (for example data attributes) to add to the card.
Options for image object
Name Type Description
src string Required. The URL of the image in the card.
alt string The alternative text of the image in the card.
html string HTML to use for the image content. If html is provided, the src and alt arguments will be ignored.
Options for actions object
Name Type Description
items array Array of actions as links for use in the card component. See macro options for actions items.
classes string Classes to add to the actions wrapper.
Options for actions items array objects
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "card/macro.njk" import card %}

<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">
    {{ card({
      clickable: true,
      secondary: true,
      href: "#",
      heading: "Services A to Z",
      headingSize: "m",
      description: "Use our service finder to find other health services"
    }) }}
  </li>
</ul>

Secondary card non-clickable

Use the non-clickable card when you have more than 1 link in the content.

Open this example in a new tab: card secondary card non clickable 
<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--secondary">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          Help from NHS 111
        </h2>
        <p>If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
        <p>Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
        <p>For a life-threatening emergency call 999.</p>
      </div>
    </div>

  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the card.
heading string Required. Text to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingHtml string Required. HTML to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingClasses string Classes to add to the card heading.
headingSize string Size of the heading – "xss", "xs", "s", "m", "l" or "xl".
headingLevel integer Optional heading level for the card heading. Defaults to 2.
headingId string Optional id attribute for the card heading.
headingVisuallyHiddenText string Optional visually hidden prefix used before the heading.
href string The value of the card link href attribute.
clickable boolean If set to true, then the whole card will become a clickable card variant.
variant string Optional variant of card – "feature", "primary", "secondary", "warning", "non-urgent", "urgent" or "emergency".
type string Deprecated in 10.4.0

Optional type of care card – "non-urgent", "urgent" or "emergency". Replaced by the variant option.
feature boolean Deprecated in 10.4.0

If set to true, then the card will become a feature card variant.
primary boolean Deprecated in 10.4.0

If set to true, the card will become a primary card variant (with chevron).
secondary boolean Deprecated in 10.4.0

If set to true, the card will become a secondary card variant.
warning boolean Deprecated in 10.4.0

If set to true, then the card will become a warning card variant used by the warning callout.
imgURL string Deprecated in 10.3.0

The URL of the image in the card. Replaced by the image.src option.
imgALT string Deprecated in 10.3.0

The alternative text of the image in the card. Replaced by the image.alt option.
image object Can be used to add an image to the card component. See macro options for image.
description string Text description within the card content. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string HTML to use within the card content. If descriptionHtml is provided, the description argument will be ignored.
actions object Can be used to add actions to the card component. See macro options for actions.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire card component in a call block.
classes string Classes to add to the card.
attributes object HTML attributes (for example data attributes) to add to the card.
Options for image object
Name Type Description
src string Required. The URL of the image in the card.
alt string The alternative text of the image in the card.
html string HTML to use for the image content. If html is provided, the src and alt arguments will be ignored.
Options for actions object
Name Type Description
items array Array of actions as links for use in the card component. See macro options for actions items.
classes string Classes to add to the actions wrapper.
Options for actions items array objects
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "card/macro.njk" import card %}

{% set cardDescriptionHtml %}
  <p>If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
  <p>Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
  <p>For a life-threatening emergency call 999.</p>
{% endset %}

<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">
    {{ card({
      secondary: true,
      heading: "Help from NHS 111",
      headingSize: "m",
      descriptionHtml: cardDescriptionHtml
    }) }}
  </li>
</ul>

Adding an image

Only use cards with images if you have evidence that they help your users, for example, where you can show that they motivate users.

Images in a card will be displayed above the heading and text. The image is set as a decorative image by default, with the alternative text being null.

Image card clickable

Open this example in a new tab: card with image 
<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable">
      <img class="nhsuk-card__img" src="https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg" alt="">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">Exercise</a>
        </h2>
        <p class="nhsuk-card__description">Programmes, workouts and tips to get you moving and improve your fitness and wellbeing</p>
      </div>
    </div>

  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the card.
heading string Required. Text to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingHtml string Required. HTML to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingClasses string Classes to add to the card heading.
headingSize string Size of the heading – "xss", "xs", "s", "m", "l" or "xl".
headingLevel integer Optional heading level for the card heading. Defaults to 2.
headingId string Optional id attribute for the card heading.
headingVisuallyHiddenText string Optional visually hidden prefix used before the heading.
href string The value of the card link href attribute.
clickable boolean If set to true, then the whole card will become a clickable card variant.
variant string Optional variant of card – "feature", "primary", "secondary", "warning", "non-urgent", "urgent" or "emergency".
type string Deprecated in 10.4.0

Optional type of care card – "non-urgent", "urgent" or "emergency". Replaced by the variant option.
feature boolean Deprecated in 10.4.0

If set to true, then the card will become a feature card variant.
primary boolean Deprecated in 10.4.0

If set to true, the card will become a primary card variant (with chevron).
secondary boolean Deprecated in 10.4.0

If set to true, the card will become a secondary card variant.
warning boolean Deprecated in 10.4.0

If set to true, then the card will become a warning card variant used by the warning callout.
imgURL string Deprecated in 10.3.0

The URL of the image in the card. Replaced by the image.src option.
imgALT string Deprecated in 10.3.0

The alternative text of the image in the card. Replaced by the image.alt option.
image object Can be used to add an image to the card component. See macro options for image.
description string Text description within the card content. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string HTML to use within the card content. If descriptionHtml is provided, the description argument will be ignored.
actions object Can be used to add actions to the card component. See macro options for actions.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire card component in a call block.
classes string Classes to add to the card.
attributes object HTML attributes (for example data attributes) to add to the card.
Options for image object
Name Type Description
src string Required. The URL of the image in the card.
alt string The alternative text of the image in the card.
html string HTML to use for the image content. If html is provided, the src and alt arguments will be ignored.
Options for actions object
Name Type Description
items array Array of actions as links for use in the card component. See macro options for actions items.
classes string Classes to add to the actions wrapper.
Options for actions items array objects
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "card/macro.njk" import card %}

<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    {{ card({
      image: {
        src: "https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg"
      },
      clickable: true,
      href: "#",
      heading: "Exercise",
      headingSize: "m",
      description: "Programmes, workouts and tips to get you moving and improve your fitness and wellbeing"
    }) }}
  </li>
</ul>

Image card non-clickable

Open this example in a new tab: card with image non clickable 
<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    <div class="nhsuk-card">
      <img class="nhsuk-card__img" src="https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg" alt="">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          Exercise
        </h2>
        <p>The <a href="#">benefits of exercise</a> and <a href="#">why we should sit less</a></p>
      </div>
    </div>

  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the card.
heading string Required. Text to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingHtml string Required. HTML to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingClasses string Classes to add to the card heading.
headingSize string Size of the heading – "xss", "xs", "s", "m", "l" or "xl".
headingLevel integer Optional heading level for the card heading. Defaults to 2.
headingId string Optional id attribute for the card heading.
headingVisuallyHiddenText string Optional visually hidden prefix used before the heading.
href string The value of the card link href attribute.
clickable boolean If set to true, then the whole card will become a clickable card variant.
variant string Optional variant of card – "feature", "primary", "secondary", "warning", "non-urgent", "urgent" or "emergency".
type string Deprecated in 10.4.0

Optional type of care card – "non-urgent", "urgent" or "emergency". Replaced by the variant option.
feature boolean Deprecated in 10.4.0

If set to true, then the card will become a feature card variant.
primary boolean Deprecated in 10.4.0

If set to true, the card will become a primary card variant (with chevron).
secondary boolean Deprecated in 10.4.0

If set to true, the card will become a secondary card variant.
warning boolean Deprecated in 10.4.0

If set to true, then the card will become a warning card variant used by the warning callout.
imgURL string Deprecated in 10.3.0

The URL of the image in the card. Replaced by the image.src option.
imgALT string Deprecated in 10.3.0

The alternative text of the image in the card. Replaced by the image.alt option.
image object Can be used to add an image to the card component. See macro options for image.
description string Text description within the card content. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string HTML to use within the card content. If descriptionHtml is provided, the description argument will be ignored.
actions object Can be used to add actions to the card component. See macro options for actions.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire card component in a call block.
classes string Classes to add to the card.
attributes object HTML attributes (for example data attributes) to add to the card.
Options for image object
Name Type Description
src string Required. The URL of the image in the card.
alt string The alternative text of the image in the card.
html string HTML to use for the image content. If html is provided, the src and alt arguments will be ignored.
Options for actions object
Name Type Description
items array Array of actions as links for use in the card component. See macro options for actions items.
classes string Classes to add to the actions wrapper.
Options for actions items array objects
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "card/macro.njk" import card %}

{% set cardDescriptionHtml %}
  <p>The <a href="#">benefits of exercise</a> and <a href="#">why we should sit less</a></p>
{% endset %}

<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    {{ card({
      image: {
        src: "https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg"
      },
      clickable: false,
      heading: "Exercise",
      headingSize: "m",
      descriptionHtml: cardDescriptionHtml
    }) }}
  </li>
</ul>

Adding actions

You can add links for 1 or more actions to a card. They show below the heading on small screens and right-aligned on bigger screens.

Card actions cannot be used on clickable cards.

They can be used in summary cards.

Open this example in a new tab: card card actions 
<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Template: Appointment invitation 1
    </h2>
    <ul class="nhsuk-card__actions">
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#">Edit<span class="nhsuk-u-visually-hidden"> (Template: Appointment invitation 1)</span></a>
      </li>
      <li class="nhsuk-card__action">
        <a class="nhsuk-link" href="#">Delete<span class="nhsuk-u-visually-hidden"> (Template: Appointment invitation 1)</span></a>
      </li>
    </ul>
  </div>
  <div class="nhsuk-card__content">
    <p><strong>SenderID</strong>: NHS Blood Test</p>
    <p>((firstName)) ((lastName)), you are due for your NHS blood test. Book your appointment or find out more at <a href="#">http://www.nhs.uk/service-name-invite</a></p>
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the card.
heading string Required. Text to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingHtml string Required. HTML to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingClasses string Classes to add to the card heading.
headingSize string Size of the heading – "xss", "xs", "s", "m", "l" or "xl".
headingLevel integer Optional heading level for the card heading. Defaults to 2.
headingId string Optional id attribute for the card heading.
headingVisuallyHiddenText string Optional visually hidden prefix used before the heading.
href string The value of the card link href attribute.
clickable boolean If set to true, then the whole card will become a clickable card variant.
variant string Optional variant of card – "feature", "primary", "secondary", "warning", "non-urgent", "urgent" or "emergency".
type string Deprecated in 10.4.0

Optional type of care card – "non-urgent", "urgent" or "emergency". Replaced by the variant option.
feature boolean Deprecated in 10.4.0

If set to true, then the card will become a feature card variant.
primary boolean Deprecated in 10.4.0

If set to true, the card will become a primary card variant (with chevron).
secondary boolean Deprecated in 10.4.0

If set to true, the card will become a secondary card variant.
warning boolean Deprecated in 10.4.0

If set to true, then the card will become a warning card variant used by the warning callout.
imgURL string Deprecated in 10.3.0

The URL of the image in the card. Replaced by the image.src option.
imgALT string Deprecated in 10.3.0

The alternative text of the image in the card. Replaced by the image.alt option.
image object Can be used to add an image to the card component. See macro options for image.
description string Text description within the card content. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string HTML to use within the card content. If descriptionHtml is provided, the description argument will be ignored.
actions object Can be used to add actions to the card component. See macro options for actions.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire card component in a call block.
classes string Classes to add to the card.
attributes object HTML attributes (for example data attributes) to add to the card.
Options for image object
Name Type Description
src string Required. The URL of the image in the card.
alt string The alternative text of the image in the card.
html string HTML to use for the image content. If html is provided, the src and alt arguments will be ignored.
Options for actions object
Name Type Description
items array Array of actions as links for use in the card component. See macro options for actions items.
classes string Classes to add to the actions wrapper.
Options for actions items array objects
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "card/macro.njk" import card %}

{% set cardDescriptionHtml %}
  <p><strong>SenderID</strong>: NHS Blood Test</p>
  <p>((firstName)) ((lastName)), you are due for your NHS blood test. Book your appointment or find out more at <a href="#">http://www.nhs.uk/service-name-invite</a></p>
{% endset %}

{{ card({
  clickable: false,
  heading: "Template: Appointment invitation 1",
  headingSize: "m",
  actions: {
    items: [
      {
        text: "Edit",
        href: "#"
      },
      {
        text: "Delete",
        href: "#"
      }
    ]
  },
  descriptionHtml: cardDescriptionHtml
}) }}

Add a short, relevant and unique card heading which identifies what the card contains. When a screen reader reads out a card action, it also reads out the card heading, making each action link unique.

Write link text that makes it clear what will happen when you click the action. Keep it short and do not add more than 3 actions.

Examples of card actions include:

  • delete appointment
  • edit appointment
  • update issue
  • approve application
  • cancel order

If the card title includes the word "appointment", for example, you may only need the words "edit" or "delete" in the link text.

If a card action cannot easily be undone or might have serious consequences, consider adding a warning or asking the user for confirmation.

Grouping cards

You can group multiple cards to show a collection of related topics or highlight key information and figures.

If you are grouping cards to create a hub page (sometimes called a landing page), use the hub page pattern.

Card width

We define the width of the cards using the grid system. For example, nhsuk-grid-column-one-half is used to make the cards half width.

Open this example in a new tab: card group half 
<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable nhsuk-card--primary">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">GPs</a>
        </h2>
        <p class="nhsuk-card__description">About GP services, including how to find and register with a local GP and how to book an appointment</p>
        <svg class="nhsuk-icon nhsuk-icon--chevron-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-.3 5.8a1 1 0 1 0-1.5 1.4l2.9 2.8-2.9 2.8a1 1 0 0 0 1.5 1.4l3.5-3.5c.4-.4.4-1 0-1.4Z" />
        </svg>
      </div>
    </div>

  </li>
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable nhsuk-card--primary">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">Hospitals</a>
        </h2>
        <p class="nhsuk-card__description">About NHS hospitals, booking and changing appointments with the NHS e-Referral Service and going into hospital</p>
        <svg class="nhsuk-icon nhsuk-icon--chevron-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-.3 5.8a1 1 0 1 0-1.5 1.4l2.9 2.8-2.9 2.8a1 1 0 0 0 1.5 1.4l3.5-3.5c.4-.4.4-1 0-1.4Z" />
        </svg>
      </div>
    </div>

  </li>
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable nhsuk-card--primary">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">Dentists</a>
        </h2>
        <p class="nhsuk-card__description">About NHS dental services, how to find an NHS dentist and how much treatment costs</p>
        <svg class="nhsuk-icon nhsuk-icon--chevron-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-.3 5.8a1 1 0 1 0-1.5 1.4l2.9 2.8-2.9 2.8a1 1 0 0 0 1.5 1.4l3.5-3.5c.4-.4.4-1 0-1.4Z" />
        </svg>
      </div>
    </div>

  </li>
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable nhsuk-card--primary">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">Prescriptions</a>
        </h2>
        <p class="nhsuk-card__description">Find out about prescriptions including charges, repeat prescriptions and if you can get free prescriptions</p>
        <svg class="nhsuk-icon nhsuk-icon--chevron-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-.3 5.8a1 1 0 1 0-1.5 1.4l2.9 2.8-2.9 2.8a1 1 0 0 0 1.5 1.4l3.5-3.5c.4-.4.4-1 0-1.4Z" />
        </svg>
      </div>
    </div>

  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the card.
heading string Required. Text to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingHtml string Required. HTML to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingClasses string Classes to add to the card heading.
headingSize string Size of the heading – "xss", "xs", "s", "m", "l" or "xl".
headingLevel integer Optional heading level for the card heading. Defaults to 2.
headingId string Optional id attribute for the card heading.
headingVisuallyHiddenText string Optional visually hidden prefix used before the heading.
href string The value of the card link href attribute.
clickable boolean If set to true, then the whole card will become a clickable card variant.
variant string Optional variant of card – "feature", "primary", "secondary", "warning", "non-urgent", "urgent" or "emergency".
type string Deprecated in 10.4.0

Optional type of care card – "non-urgent", "urgent" or "emergency". Replaced by the variant option.
feature boolean Deprecated in 10.4.0

If set to true, then the card will become a feature card variant.
primary boolean Deprecated in 10.4.0

If set to true, the card will become a primary card variant (with chevron).
secondary boolean Deprecated in 10.4.0

If set to true, the card will become a secondary card variant.
warning boolean Deprecated in 10.4.0

If set to true, then the card will become a warning card variant used by the warning callout.
imgURL string Deprecated in 10.3.0

The URL of the image in the card. Replaced by the image.src option.
imgALT string Deprecated in 10.3.0

The alternative text of the image in the card. Replaced by the image.alt option.
image object Can be used to add an image to the card component. See macro options for image.
description string Text description within the card content. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string HTML to use within the card content. If descriptionHtml is provided, the description argument will be ignored.
actions object Can be used to add actions to the card component. See macro options for actions.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire card component in a call block.
classes string Classes to add to the card.
attributes object HTML attributes (for example data attributes) to add to the card.
Options for image object
Name Type Description
src string Required. The URL of the image in the card.
alt string The alternative text of the image in the card.
html string HTML to use for the image content. If html is provided, the src and alt arguments will be ignored.
Options for actions object
Name Type Description
items array Array of actions as links for use in the card component. See macro options for actions items.
classes string Classes to add to the actions wrapper.
Options for actions items array objects
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "card/macro.njk" import card %}

<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    {{ card({
      primary: true,
      clickable: true,
      href: "#",
      heading: "GPs",
      headingSize: "m",
      description: "About GP services, including how to find and register with a local GP and how to book an appointment"
    }) }}
  </li>
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    {{ card({
      primary: true,
      clickable: true,
      href: "#",
      heading: "Hospitals",
      headingSize: "m",
      description: "About NHS hospitals, booking and changing appointments with the NHS e-Referral Service and going into hospital"
    }) }}
  </li>
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    {{ card({
      primary: true,
      clickable: true,
      href: "#",
      heading: "Dentists",
      headingSize: "m",
      description: "About NHS dental services, how to find an NHS dentist and how much treatment costs"
    }) }}
  </li>
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    {{ card({
      primary: true,
      clickable: true,
      href: "#",
      heading: "Prescriptions",
      headingSize: "m",
      description: "Find out about prescriptions including charges, repeat prescriptions and if you can get free prescriptions"
    }) }}
  </li>
</ul>

For thirds, use nhsuk-grid-column-one-third.

Open this example in a new tab: card group third 
<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">5 steps to mental wellbeing</a>
        </h2>
        <p class="nhsuk-card__description">Practical advice to help you feel mentally and emotionally better</p>
      </div>
    </div>

  </li>
  <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">Healthy weight</a>
        </h2>
        <p class="nhsuk-card__description">Check your BMI using our healthy weight calculator and find out if you&#39;re a healthy weight</p>
      </div>
    </div>

  </li>
  <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">Exercise</a>
        </h2>
        <p class="nhsuk-card__description">Programmes, workouts and tips to get you moving and improve your fitness and wellbeing</p>
      </div>
    </div>

  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the card.
heading string Required. Text to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingHtml string Required. HTML to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingClasses string Classes to add to the card heading.
headingSize string Size of the heading – "xss", "xs", "s", "m", "l" or "xl".
headingLevel integer Optional heading level for the card heading. Defaults to 2.
headingId string Optional id attribute for the card heading.
headingVisuallyHiddenText string Optional visually hidden prefix used before the heading.
href string The value of the card link href attribute.
clickable boolean If set to true, then the whole card will become a clickable card variant.
variant string Optional variant of card – "feature", "primary", "secondary", "warning", "non-urgent", "urgent" or "emergency".
type string Deprecated in 10.4.0

Optional type of care card – "non-urgent", "urgent" or "emergency". Replaced by the variant option.
feature boolean Deprecated in 10.4.0

If set to true, then the card will become a feature card variant.
primary boolean Deprecated in 10.4.0

If set to true, the card will become a primary card variant (with chevron).
secondary boolean Deprecated in 10.4.0

If set to true, the card will become a secondary card variant.
warning boolean Deprecated in 10.4.0

If set to true, then the card will become a warning card variant used by the warning callout.
imgURL string Deprecated in 10.3.0

The URL of the image in the card. Replaced by the image.src option.
imgALT string Deprecated in 10.3.0

The alternative text of the image in the card. Replaced by the image.alt option.
image object Can be used to add an image to the card component. See macro options for image.
description string Text description within the card content. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string HTML to use within the card content. If descriptionHtml is provided, the description argument will be ignored.
actions object Can be used to add actions to the card component. See macro options for actions.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire card component in a call block.
classes string Classes to add to the card.
attributes object HTML attributes (for example data attributes) to add to the card.
Options for image object
Name Type Description
src string Required. The URL of the image in the card.
alt string The alternative text of the image in the card.
html string HTML to use for the image content. If html is provided, the src and alt arguments will be ignored.
Options for actions object
Name Type Description
items array Array of actions as links for use in the card component. See macro options for actions items.
classes string Classes to add to the actions wrapper.
Options for actions items array objects
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "card/macro.njk" import card %}

<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
    {{ card({
      clickable: true,
      href: "#",
      heading: "5 steps to mental wellbeing",
      headingSize: "m",
      description: "Practical advice to help you feel mentally and emotionally better"
    }) }}
  </li>
  <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
    {{ card({
      clickable: true,
      href: "#",
      heading: "Healthy weight",
      headingSize: "m",
      description: "Check your BMI using our healthy weight calculator and find out if you're a healthy weight"
    }) }}
  </li>
  <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
    {{ card({
      clickable: true,
      href: "#",
      heading: "Exercise",
      headingSize: "m",
      description: "Programmes, workouts and tips to get you moving and improve your fitness and wellbeing"
    }) }}
  </li>
</ul>

When using thirds or quarters, check your content on smaller screens as the cards become narrow. Avoid adding paragraphs of text that will become hard to read.

For quarters, use nhsuk-grid-column-one-quarter.

Open this example in a new tab: card group quarter 
<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">
          <span role="text">
            <span class="nhsuk-u-visually-hidden">Applicants:</span> 91
          </span>
        </h2>
        <a href="#/applicants" class="nhsuk-card__link">Applicants</a>

      </div>
    </div>
  </li>
  <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">
          <span role="text">
            <span class="nhsuk-u-visually-hidden">Jobs:</span> 23
          </span>
        </h2>
        <a href="#/jobs" class="nhsuk-card__link">Jobs</a>

      </div>
    </div>
  </li>
  <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">
          <span role="text">
            <span class="nhsuk-u-visually-hidden">Services:</span> 8
          </span>
        </h2>
        <a href="#/services" class="nhsuk-card__link">Services</a>

      </div>
    </div>
  </li>
  <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
    <div class="nhsuk-card nhsuk-card--clickable">
      <div class="nhsuk-card__content">
        <h2 class="nhsuk-card__heading nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">
          <span role="text">
            <span class="nhsuk-u-visually-hidden">Messages:</span> 33
          </span>
        </h2>
        <a href="#/messages" class="nhsuk-card__link">Messages</a>

      </div>
    </div>
  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the card.
heading string Required. Text to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingHtml string Required. HTML to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingClasses string Classes to add to the card heading.
headingSize string Size of the heading – "xss", "xs", "s", "m", "l" or "xl".
headingLevel integer Optional heading level for the card heading. Defaults to 2.
headingId string Optional id attribute for the card heading.
headingVisuallyHiddenText string Optional visually hidden prefix used before the heading.
href string The value of the card link href attribute.
clickable boolean If set to true, then the whole card will become a clickable card variant.
variant string Optional variant of card – "feature", "primary", "secondary", "warning", "non-urgent", "urgent" or "emergency".
type string Deprecated in 10.4.0

Optional type of care card – "non-urgent", "urgent" or "emergency". Replaced by the variant option.
feature boolean Deprecated in 10.4.0

If set to true, then the card will become a feature card variant.
primary boolean Deprecated in 10.4.0

If set to true, the card will become a primary card variant (with chevron).
secondary boolean Deprecated in 10.4.0

If set to true, the card will become a secondary card variant.
warning boolean Deprecated in 10.4.0

If set to true, then the card will become a warning card variant used by the warning callout.
imgURL string Deprecated in 10.3.0

The URL of the image in the card. Replaced by the image.src option.
imgALT string Deprecated in 10.3.0

The alternative text of the image in the card. Replaced by the image.alt option.
image object Can be used to add an image to the card component. See macro options for image.
description string Text description within the card content. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string HTML to use within the card content. If descriptionHtml is provided, the description argument will be ignored.
actions object Can be used to add actions to the card component. See macro options for actions.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire card component in a call block.
classes string Classes to add to the card.
attributes object HTML attributes (for example data attributes) to add to the card.
Options for image object
Name Type Description
src string Required. The URL of the image in the card.
alt string The alternative text of the image in the card.
html string HTML to use for the image content. If html is provided, the src and alt arguments will be ignored.
Options for actions object
Name Type Description
items array Array of actions as links for use in the card component. See macro options for actions items.
classes string Classes to add to the actions wrapper.
Options for actions items array objects
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "card/macro.njk" import card %}

<ul class="nhsuk-grid-row nhsuk-card-group">
  <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
    {% call card({
      clickable: true,
      heading: "91",
      headingClasses: "nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1",
      headingVisuallyHiddenText: "Applicants"
    }) %}
      <a href="#/applicants" class="nhsuk-card__link">Applicants</a>
    {% endcall %}
  </li>
  <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
    {% call card({
      clickable: true,
      heading: "23",
      headingClasses: "nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1",
      headingVisuallyHiddenText: "Jobs"
    }) %}
      <a href="#/jobs" class="nhsuk-card__link">Jobs</a>
    {% endcall %}
  </li>
  <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
    {% call card({
      clickable: true,
      heading: "8",
      headingClasses: "nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1",
      headingVisuallyHiddenText: "Services"
    }) %}
      <a href="#/services" class="nhsuk-card__link">Services</a>
    {% endcall %}
  </li>
  <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
    {% call card({
      clickable: true,
      heading: "33",
      headingClasses: "nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1",
      headingVisuallyHiddenText: "Messages"
    }) %}
      <a href="#/messages" class="nhsuk-card__link">Messages</a>
    {% endcall %}
  </li>
</ul>

Accessibility

Heading level and size

Use headings correctly to reflect the page structure. If you need to, change the default h2 heading.

Here's an example of replacing the default h2 heading with an h3.

Open this example in a new tab: card heading level 
<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Heading level 3
    </h3>
    <p class="nhsuk-card__description">Card description text goes here</p>
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the card.
heading string Required. Text to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingHtml string Required. HTML to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingClasses string Classes to add to the card heading.
headingSize string Size of the heading – "xss", "xs", "s", "m", "l" or "xl".
headingLevel integer Optional heading level for the card heading. Defaults to 2.
headingId string Optional id attribute for the card heading.
headingVisuallyHiddenText string Optional visually hidden prefix used before the heading.
href string The value of the card link href attribute.
clickable boolean If set to true, then the whole card will become a clickable card variant.
variant string Optional variant of card – "feature", "primary", "secondary", "warning", "non-urgent", "urgent" or "emergency".
type string Deprecated in 10.4.0

Optional type of care card – "non-urgent", "urgent" or "emergency". Replaced by the variant option.
feature boolean Deprecated in 10.4.0

If set to true, then the card will become a feature card variant.
primary boolean Deprecated in 10.4.0

If set to true, the card will become a primary card variant (with chevron).
secondary boolean Deprecated in 10.4.0

If set to true, the card will become a secondary card variant.
warning boolean Deprecated in 10.4.0

If set to true, then the card will become a warning card variant used by the warning callout.
imgURL string Deprecated in 10.3.0

The URL of the image in the card. Replaced by the image.src option.
imgALT string Deprecated in 10.3.0

The alternative text of the image in the card. Replaced by the image.alt option.
image object Can be used to add an image to the card component. See macro options for image.
description string Text description within the card content. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string HTML to use within the card content. If descriptionHtml is provided, the description argument will be ignored.
actions object Can be used to add actions to the card component. See macro options for actions.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire card component in a call block.
classes string Classes to add to the card.
attributes object HTML attributes (for example data attributes) to add to the card.
Options for image object
Name Type Description
src string Required. The URL of the image in the card.
alt string The alternative text of the image in the card.
html string HTML to use for the image content. If html is provided, the src and alt arguments will be ignored.
Options for actions object
Name Type Description
items array Array of actions as links for use in the card component. See macro options for actions items.
classes string Classes to add to the actions wrapper.
Options for actions items array objects
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "card/macro.njk" import card %}

{{ card({
  heading: "Heading level 3",
  headingLevel: "3",
  description: "Card description text goes here"
}) }}

You can change the size of the heading using heading typography styles.

When using Nunjucks, you can set the size of card headings using the headingSize option, for example: headingSize: "s". You can use sizes xxs, xs, s, m, l, xl.

Open this example in a new tab: card heading size 
<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-l">
      Heading size large
    </h2>
    <p class="nhsuk-card__description">Card description text goes here</p>
  </div>
</div>

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Heading size medium
    </h2>
    <p class="nhsuk-card__description">Card description text goes here</p>
  </div>
</div>

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-s">
      Heading size small
    </h2>
    <p class="nhsuk-card__description">Card description text goes here</p>
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the card.
heading string Required. Text to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingHtml string Required. HTML to use within the heading of the card component. If headingHtml is provided, the heading argument will be ignored.
headingClasses string Classes to add to the card heading.
headingSize string Size of the heading – "xss", "xs", "s", "m", "l" or "xl".
headingLevel integer Optional heading level for the card heading. Defaults to 2.
headingId string Optional id attribute for the card heading.
headingVisuallyHiddenText string Optional visually hidden prefix used before the heading.
href string The value of the card link href attribute.
clickable boolean If set to true, then the whole card will become a clickable card variant.
variant string Optional variant of card – "feature", "primary", "secondary", "warning", "non-urgent", "urgent" or "emergency".
type string Deprecated in 10.4.0

Optional type of care card – "non-urgent", "urgent" or "emergency". Replaced by the variant option.
feature boolean Deprecated in 10.4.0

If set to true, then the card will become a feature card variant.
primary boolean Deprecated in 10.4.0

If set to true, the card will become a primary card variant (with chevron).
secondary boolean Deprecated in 10.4.0

If set to true, the card will become a secondary card variant.
warning boolean Deprecated in 10.4.0

If set to true, then the card will become a warning card variant used by the warning callout.
imgURL string Deprecated in 10.3.0

The URL of the image in the card. Replaced by the image.src option.
imgALT string Deprecated in 10.3.0

The alternative text of the image in the card. Replaced by the image.alt option.
image object Can be used to add an image to the card component. See macro options for image.
description string Text description within the card content. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string HTML to use within the card content. If descriptionHtml is provided, the description argument will be ignored.
actions object Can be used to add actions to the card component. See macro options for actions.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire card component in a call block.
classes string Classes to add to the card.
attributes object HTML attributes (for example data attributes) to add to the card.
Options for image object
Name Type Description
src string Required. The URL of the image in the card.
alt string The alternative text of the image in the card.
html string HTML to use for the image content. If html is provided, the src and alt arguments will be ignored.
Options for actions object
Name Type Description
items array Array of actions as links for use in the card component. See macro options for actions items.
classes string Classes to add to the actions wrapper.
Options for actions items array objects
Name Type Description
href string Required. The value of the link's href attribute for an action item.
text string Required. If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each action item. If html is provided, the text option will be ignored.
visuallyHiddenText string Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios.
classes string Classes to add to the action item.
attributes object HTML attributes (for example data attributes) to add to the action item. 
{% from "card/macro.njk" import card %}

{{ card({
  heading: "Heading size large",
  headingSize: "l",
  description: "Card description text goes here"
}) }}

{{ card({
  heading: "Heading size medium",
  headingSize: "m",
  description: "Card description text goes here"
}) }}

{{ card({
  heading: "Heading size small",
  headingSize: "s",
  description: "Card description text goes here"
}) }}

Research

We have tested cards on the NHS website, summary care record and NHS login help centre. We found that they helped users:

  • scan for relevant information
  • decide where to go next

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feed back or share insights on GitHub

Read more about how to feed back or share insights.

If you have any questions, get in touch with the service manual team.

Updated: April 2026