Components

Card links

Use card links to help users reach the next stage of their NHS App journey.

Open this example (Card link) in a new tab 
<ul class="nhsapp-cards nhsapp-cards--stacked">
  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          GP health record
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </div>
  </li>

  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          View and manage prescriptions
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </div>
  </li>

  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          Upcoming and past appointments
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </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.

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.

Name Type Required Description
title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
href string conditional Makes the title a link when provided.
linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
titleClasses string no Classes for the title element.
containerClasses string no Classes for the inner container.
description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
descriptionHtml string conditional HTML description (allows markup). Overrides description.
descriptionClasses string no Classes for the description.
aboveContent.html string no HTML shown above the title (for example a tag).
footer.html string no HTML shown in the footer.
img{}.src string conditional Image URL. Adds an image section when present.
img{}.alt string no Image alt text. Leave empty only if purely decorative.
badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
badgeLarge{}.label string yes Visually hidden text read after the number.
badgeLarge{}.id string no ID attribute for the badge.
badgeLarge{}.classes string no Classes for the badge.
badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
id string no ID for the card.
classes string no Classes for the card.
attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCardGroup %}
{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

{{ nhsappCardGroup({
  stacked: true,
  cards: [
    {
      title: 'GP health record',
      href: '#'
    },
    {
      title: 'View and manage prescriptions',
      href: '#'
    },
    {
      title: 'Upcoming and past appointments',
      href: '#'
    }
  ]
}) }}

To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

When to use

Use card links to take users:

  • to the start of an NHS App service
  • deeper into an area of the app

How to use

Use the variation below that fits best with the context.

Use a concise phrase to explain where the link goes.

Open this example (Card link short) in a new tab 
<div class="nhsapp-card">
  <div class="nhsapp-card__container">
    <div class="nhsapp-card__content">
      <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
        Request repeat prescriptions
      </a>
    </div>

    <svg
      class="nhsapp-icon nhsapp-icon--chevron-right"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
      height="2rem"
      width="2rem"
      viewBox="0 0 24 24"
    >
      <path
        d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
      />
    </svg>
  </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.

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.

Name Type Required Description
title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
href string conditional Makes the title a link when provided.
linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
titleClasses string no Classes for the title element.
containerClasses string no Classes for the inner container.
description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
descriptionHtml string conditional HTML description (allows markup). Overrides description.
descriptionClasses string no Classes for the description.
aboveContent.html string no HTML shown above the title (for example a tag).
footer.html string no HTML shown in the footer.
img{}.src string conditional Image URL. Adds an image section when present.
img{}.alt string no Image alt text. Leave empty only if purely decorative.
badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
badgeLarge{}.label string yes Visually hidden text read after the number.
badgeLarge{}.id string no ID attribute for the badge.
badgeLarge{}.classes string no Classes for the badge.
badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
id string no ID for the card.
classes string no Classes for the card.
attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

{{ nhsappCard({
  title: 'Request repeat prescriptions',
  href: '#'
}) }}

To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Only use this variation if you have found a user need for more detailed links.

Open this example (Card link with description) in a new tab 
<div class="nhsapp-card">
  <div class="nhsapp-card__container">
    <div class="nhsapp-card__content">
      <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
        Your approved prescriptions
      </a>
      <div class="nhsapp-card__below">
        <p class="nhsapp-card__description">
          View prescriptions ready for pharmacy to prepare
        </p>
      </div>
    </div>

    <svg
      class="nhsapp-icon nhsapp-icon--chevron-right"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
      height="2rem"
      width="2rem"
      viewBox="0 0 24 24"
    >
      <path
        d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
      />
    </svg>
  </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.

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.

Name Type Required Description
title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
href string conditional Makes the title a link when provided.
linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
titleClasses string no Classes for the title element.
containerClasses string no Classes for the inner container.
description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
descriptionHtml string conditional HTML description (allows markup). Overrides description.
descriptionClasses string no Classes for the description.
aboveContent.html string no HTML shown above the title (for example a tag).
footer.html string no HTML shown in the footer.
img{}.src string conditional Image URL. Adds an image section when present.
img{}.alt string no Image alt text. Leave empty only if purely decorative.
badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
badgeLarge{}.label string yes Visually hidden text read after the number.
badgeLarge{}.id string no ID attribute for the badge.
badgeLarge{}.classes string no Classes for the badge.
badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
id string no ID for the card.
classes string no Classes for the card.
attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

{{ nhsappCard({
  title: 'Your approved prescriptions',
  href: '#',
  description: 'View prescriptions ready for pharmacy to prepare'
}) }}

To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Use badges on card links to alert users to new, important information.

Open this example (Card link with description) in a new tab 
<div class="nhsapp-card">
  <div class="nhsapp-card__container">
    <div class="nhsapp-card__content">
      <a
        href="#"
        class="nhsapp-card__link nhsuk-link--no-visited-state"
        aria-label="Hospital appointments, you have 1 new notification"
      >
        Hospital appointments
      </a>
    </div>

    <p class="nhsapp-badge" aria-hidden="true">
      <span class="nhsuk-u-visually-hidden">You have</span>
      1
      <span class="nhsuk-u-visually-hidden"></span>
    </p>
    <svg
      class="nhsapp-icon nhsapp-icon--chevron-right"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
      height="2rem"
      width="2rem"
      viewBox="0 0 24 24"
    >
      <path
        d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
      />
    </svg>
  </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.

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.

Name Type Required Description
title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
href string conditional Makes the title a link when provided.
linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
titleClasses string no Classes for the title element.
containerClasses string no Classes for the inner container.
description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
descriptionHtml string conditional HTML description (allows markup). Overrides description.
descriptionClasses string no Classes for the description.
aboveContent.html string no HTML shown above the title (for example a tag).
footer.html string no HTML shown in the footer.
img{}.src string conditional Image URL. Adds an image section when present.
img{}.alt string no Image alt text. Leave empty only if purely decorative.
badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
badgeLarge{}.label string yes Visually hidden text read after the number.
badgeLarge{}.id string no ID attribute for the badge.
badgeLarge{}.classes string no Classes for the badge.
badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
id string no ID for the card.
classes string no Classes for the card.
attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

{{ nhsappCard({
  title: 'Hospital appointments',
  href: '#',
  linkAriaLabel: 'Hospital appointments, you have 1 new notification',
  badgeLarge: {
    count: 1,
    attributes: { 
      'aria-hidden': 'true' 
    }
  }
}) }}

To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Use secondary card links to signpost information that is less important in the context of the page.

Open this example (Card link secondary) in a new tab 
<div class="nhsapp-card nhsapp-card--secondary">
  <div class="nhsapp-card__container">
    <div class="nhsapp-card__content">
      <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
        Find NHS services near you
      </a>
    </div>

    <svg
      class="nhsapp-icon nhsapp-icon--chevron-right"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
      height="2rem"
      width="2rem"
      viewBox="0 0 24 24"
    >
      <path
        d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
      />
    </svg>
  </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.

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.

Name Type Required Description
title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
href string conditional Makes the title a link when provided.
linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
titleClasses string no Classes for the title element.
containerClasses string no Classes for the inner container.
description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
descriptionHtml string conditional HTML description (allows markup). Overrides description.
descriptionClasses string no Classes for the description.
aboveContent.html string no HTML shown above the title (for example a tag).
footer.html string no HTML shown in the footer.
img{}.src string conditional Image URL. Adds an image section when present.
img{}.alt string no Image alt text. Leave empty only if purely decorative.
badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
badgeLarge{}.label string yes Visually hidden text read after the number.
badgeLarge{}.id string no ID attribute for the badge.
badgeLarge{}.classes string no Classes for the badge.
badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
id string no ID for the card.
classes string no Classes for the card.
attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

{{ nhsappCard({
  title: 'Find NHS services near you',
  href: '#',
  classes: 'nhsapp-card--secondary'
}) }}

To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Colour variations

You can use colour to highlight a card link. This can help draw attention to important content.

Use colour sparingly and make sure there is enough contrast between text and background.

Open this example (Card account) in a new tab 
<div class="nhsapp-cards nhsapp-cards--stacked nhsapp-cards--pale-blue">
  <div class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <h2 class="nhsapp-card__title nhsuk-u-font-size-36">Neil Dean</h2>
        <p class="nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-0">
          <strong>Date of birth:</strong> 15 March 1984
        </p>
        <p><strong>NHS number:</strong> 123 456 7890</p>
      </div>
    </div>
  </div>

  <div class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          Manage health services for others
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </div>
  </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.

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.

Name Type Required Description
heading string conditional Text to use for the heding of the card group. If headingHtml is provided, the heading argument will be ignored.
headingHtml string conditional HTML to use for the heading of the card group. If headingHtml is provided, the heading argument will be ignored.
headingLevel number conditional Heading level (2–6) for the heading. Defaults to 2 when not set. If headingHtml is provided, the headingLevel argument will be ignored.
description string conditional Plain text shown under the group heading. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string conditional HTML version of the description. If descriptionHtml is provided, the description argument will be ignored..
stacked boolean no Adds nhsapp-cards--stacked class to card group.
isListItem boolean no If true (default) wrapper is <ul> with each card as <li>. If false uses <div> wrappers.
id string no ID for the card group.
classes string no Classes for the card group.
attributes object no HTML attributes for the card group (data-_ or aria-_).
cards array yes Array of card objects.
cards[]title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
cards[]href string conditional Makes the title a link when provided.
cards[]linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
cards[]headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
cards[]titleClasses string no Classes for the title element.
cards[]containerClasses string no Classes for the inner container.
cards[]description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
cards[]descriptionHtml string conditional HTML description (allows markup). Overrides description.
cards[]descriptionClasses string no Classes for the description.
cards[]aboveContent.html string no HTML shown above the title (for example a tag).
cards[]footer.html string no HTML shown in the footer.
cards[]img{}.src string conditional Image URL. Adds an image section when present.
cards[]img{}.alt string no Image alt text. Leave empty only if purely decorative.
cards[]badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
cards[]badgeLarge{}.label string yes Visually hidden text read after the number.
cards[]badgeLarge{}.id string no ID attribute for the badge.
cards[]badgeLarge{}.classes string no Classes for the badge.
cards[]badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
cards[]id string no ID for the card.
cards[]classes string no Classes for the card.
cards[]attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCardGroup %}
{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

{{ nhsappCardGroup({
  stacked: true,
  classes: 'nhsapp-cards--pale-blue',
  isListItem: false,
  cards: [
    {
      title: 'Neil Dean',
      titleClasses: 'nhsuk-u-font-size-36',
      headingLevel: '2',
      descriptionHtml: '<p class="nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-0"><strong>Date of birth:</strong> 15 March 1984</p>
            <p><strong>NHS number:</strong> 123 456 7890</p>'
    },
    {
      title: 'Manage health services for others',
      href: '#'
    }
  ]
}) }}

You can add an image to a card link. We use this on the home screen of the NHS App to help users learn about public health campaigns.

Open this example (Card campaign) in a new tab 
<div class="nhsapp-card nhsapp-card--with-media nhsapp-card--dark-blue">
  <div class="nhsapp-card__media">
    <img
      class="nhsapp-card__img"
      src="../../../assets/images/campaign-card-image.jpg"
      alt=""
    />
  </div>

  <div class="nhsapp-card__container">
    <div class="nhsapp-card__content">
      <a
        href="#"
        class="nhsapp-card__link nhsuk-link--no-visited-state nhsuk-u-font-size-26"
      >
        Help change the NHS
      </a>
      <p class="nhsuk-u-margin-top-2">
        Have your say on making the NHS fit for the future
      </p>
    </div>

    <svg
      class="nhsapp-icon nhsapp-icon--chevron-right"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
      height="2rem"
      width="2rem"
      viewBox="0 0 24 24"
    >
      <path
        d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
      />
    </svg>
  </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.

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.

Name Type Required Description
title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
href string conditional Makes the title a link when provided.
linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
titleClasses string no Classes for the title element.
containerClasses string no Classes for the inner container.
description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
descriptionHtml string conditional HTML description (allows markup). Overrides description.
descriptionClasses string no Classes for the description.
aboveContent.html string no HTML shown above the title (for example a tag).
footer.html string no HTML shown in the footer.
img{}.src string conditional Image URL. Adds an image section when present.
img{}.alt string no Image alt text. Leave empty only if purely decorative.
badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
badgeLarge{}.label string yes Visually hidden text read after the number.
badgeLarge{}.id string no ID attribute for the badge.
badgeLarge{}.classes string no Classes for the badge.
badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
id string no ID for the card.
classes string no Classes for the card.
attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

{{ nhsappCard({
  classes: 'nhsapp-card--dark-blue',
  href: '#',
  title: 'Help change the NHS',
  titleClasses: 'nhsuk-u-font-size-26',
  descriptionHtml: '<p class="nhsuk-u-margin-top-2">Have your say on making the NHS fit for the future</p>',
  img: {
    src: '../../../assets/images/campaign-card-image.jpg'
  }
}) }}

Custom content on card links

You can add custom content to a card link, such as a tag, appointment time and location.

Keep the content short and easy to scan. Test with users to check the card gives them the right amount of information.

Open this example (Card link icon) in a new tab 
<div class="nhsapp-card">
  <div class="nhsapp-card__container">
    <div class="nhsapp-card__content">
      <div class="nhsapp-card__above">
        <span
          class="nhsapp-tag nhsapp-tag--red nhsuk-u-margin-bottom-3"
          aria-hidden="true"
        >
          Action needed
        </span>
      </div>
      <a
        href="#"
        class="nhsapp-card__link nhsuk-link--no-visited-state nhsuk-u-font-size-22"
        aria-label="Action needed: Orthopaedic appointment on Monday 3 June 2024 at 9:40am, at The Willows, Croydon University Hospital"
      >
        Orthopaedic appointment
      </a>
      <p
        aria-hidden="true"
        class="nhsuk-u-font-weight-bold nhsuk-u-margin-top-1 nhsuk-u-margin-bottom-3"
      >
        Monday 3 June 2024 <br />
        9:40am
      </p>
      <p aria-hidden="true" class="nhsuk-u-margin-bottom-3">
        The Willows, Croydon University Hospital
      </p>
      <p
        class="nhsapp-badge-small nhsapp-badge-small--red nhsuk-body-s nhsuk-u-secondary-text-colour"
      >
        <span class="nhsapp-badge-small__indicator" aria-hidden="true"></span>
        <span class="nhsuk-u-visually-hidden">New</span>
        <span>Questionnaire attached</span>
      </p>
    </div>

    <svg
      class="nhsapp-icon nhsapp-icon--chevron-right"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
      height="2rem"
      width="2rem"
      viewBox="0 0 24 24"
    >
      <path
        d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
      />
    </svg>
  </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.

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.

Name Type Required Description
title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
href string conditional Makes the title a link when provided.
linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
titleClasses string no Classes for the title element.
containerClasses string no Classes for the inner container.
description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
descriptionHtml string conditional HTML description (allows markup). Overrides description.
descriptionClasses string no Classes for the description.
aboveContent.html string no HTML shown above the title (for example a tag).
footer.html string no HTML shown in the footer.
img{}.src string conditional Image URL. Adds an image section when present.
img{}.alt string no Image alt text. Leave empty only if purely decorative.
badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
badgeLarge{}.label string yes Visually hidden text read after the number.
badgeLarge{}.id string no ID attribute for the badge.
badgeLarge{}.classes string no Classes for the badge.
badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
id string no ID for the card.
classes string no Classes for the card.
attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}
{% from 'nhsapp/components/tag/macro.njk' import nhsappTag %}

{% set tag %}
  {{ nhsappTag({ 
    text: 'Action needed', 
    classes: 'nhsapp-tag--red nhsuk-u-margin-bottom-3',
    attributes: { 
      'aria-hidden': 'true' 
    }
  }) }}
{% endset %}

{{ nhsappCard({
  title: 'Orthopaedic appointment',
  href: '#',
  titleClasses: 'nhsuk-u-font-size-22',
  linkAriaLabel: 'Action needed: Orthopaedic appointment on Monday 3 June 2024 at 9:40am, at The Willows, Croydon University Hospital',
  descriptionHtml: '
    <p aria-hidden="true" class="nhsuk-u-font-weight-bold nhsuk-u-margin-top-1 nhsuk-u-margin-bottom-3">Monday 3 June 2024 <br> 9:40am</p>
    <p aria-hidden="true" class="nhsuk-u-margin-bottom-3">The Willows, Croydon University Hospital</p>
    <p class="nhsapp-badge-small nhsapp-badge-small--red nhsuk-body-s nhsuk-u-secondary-text-colour">
      <span class="nhsapp-badge-small__indicator" aria-hidden="true"></span>
      <span class="nhsuk-u-visually-hidden">New</span>
      <span>Questionnaire attached</span>
    </p>
  ',
  aboveContent: { html: tag }
}) }}

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

You can use a footer to separate related content inside a card link.

Open this example (Card with footer) in a new tab 
<div class="nhsapp-card">
  <div class="nhsapp-card__container">
    <div class="nhsapp-card__content">
      <a
        href="#"
        class="nhsapp-card__link nhsuk-link--no-visited-state nhsuk-u-font-size-22"
        aria-label="Action needed: Orthopaedic appointment on Monday 3 June 2024 at 9:40am, at The Willows, Croydon University Hospital"
      >
        Orthopaedic appointment
      </a>
      <p
        aria-hidden="true"
        class="nhsuk-u-font-weight-bold nhsuk-u-margin-top-1 nhsuk-u-margin-bottom-3"
      >
        Monday 3 June 2024 <br />
        9:40am
      </p>
      <p aria-hidden="true">The Willows, Croydon University Hospital</p>
    </div>

    <svg
      class="nhsapp-icon nhsapp-icon--chevron-right"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
      height="2rem"
      width="2rem"
      viewBox="0 0 24 24"
    >
      <path
        d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
      />
    </svg>
  </div>
  <div class="nhsapp-card__footer">
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
      "
    >
      <svg
        class="nhsapp-icon nhsapp-icon__clock nhsapp-icon--black nhsapp-icon--32"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M22.4301 10.7H21.2301C20.5901 5.79001 16.4001 1.99001 11.3201 1.99001C5.79006 1.99001 1.31006 6.47001 1.31006 12C1.31006 17.53 5.79006 22.01 11.3201 22.01C14.7301 22.01 17.7401 20.3 19.5501 17.69H19.5401C19.6401 17.55 19.7101 17.4 19.7101 17.22C19.7101 16.79 19.3601 16.45 18.9401 16.45C18.6901 16.45 18.4701 16.58 18.3301 16.77H18.3201C16.7801 18.97 14.2301 20.42 11.3301 20.42C6.63006 20.42 2.82006 16.61 2.82006 11.91C2.82006 7.21001 6.61006 3.40001 11.3201 3.40001C15.6101 3.40001 19.1401 6.57001 19.7301 10.7H18.7001C18.4901 10.7 18.3701 10.94 18.4901 11.11L20.3701 13.74C20.4701 13.89 20.6901 13.88 20.7901 13.74L22.6401 11.11C22.7601 10.94 22.6401 10.7 22.4301 10.7Z"
        />
        <path
          d="M13.8401 15.25C13.8401 15.25 13.8401 15.25 13.8501 15.26L13.8901 15.3C14.0001 15.39 14.1401 15.44 14.2901 15.44C14.6401 15.44 14.9301 15.15 14.9301 14.8C14.9301 14.64 14.8701 14.49 14.7701 14.37L14.7501 14.35C14.7501 14.35 14.7501 14.35 14.7401 14.34L11.6901 11.45V6.46001C11.6601 6.14001 11.3901 5.88001 11.0501 5.88001C10.7101 5.88001 10.4401 6.14001 10.4101 6.46001V6.51001C10.4101 6.51001 10.4101 6.52001 10.4101 6.53001V12.01L13.8301 15.26L13.8401 15.25Z"
        />
      </svg>
      <div>
        <p
          class="nhsuk-u-font-weight-bold nhsuk-body-m nhsuk-u-margin-bottom-0"
        >
          Long Stay
        </p>
        <p
          class="nhsuk-body-s nhsuk-u-secondary-text-colour nhsuk-u-margin-bottom-0"
        >
          Plan to stay between 2 to 8 hours
        </p>
      </div>
    </div>
  </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.

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.

Name Type Required Description
title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
href string conditional Makes the title a link when provided.
linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
titleClasses string no Classes for the title element.
containerClasses string no Classes for the inner container.
description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
descriptionHtml string conditional HTML description (allows markup). Overrides description.
descriptionClasses string no Classes for the description.
aboveContent.html string no HTML shown above the title (for example a tag).
footer.html string no HTML shown in the footer.
img{}.src string conditional Image URL. Adds an image section when present.
img{}.alt string no Image alt text. Leave empty only if purely decorative.
badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
badgeLarge{}.label string yes Visually hidden text read after the number.
badgeLarge{}.id string no ID attribute for the badge.
badgeLarge{}.classes string no Classes for the badge.
badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
id string no ID for the card.
classes string no Classes for the card.
attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}


{{ nhsappCard({
  title: 'Orthopaedic appointment',
  href: '#',
  titleClasses: 'nhsuk-u-font-size-22',
  linkAriaLabel: 'Action needed: Orthopaedic appointment on Monday 3 June 2024 at 9:40am, at The Willows, Croydon University Hospital',
  descriptionHtml: '
    <p aria-hidden="true" class="nhsuk-u-font-weight-bold nhsuk-u-margin-top-1 nhsuk-u-margin-bottom-3">Monday 3 June 2024 <br> 9:40am</p>
    <p aria-hidden="true">The Willows, Croydon University Hospital</p>
  ',
  footer: { 
    html: '
      <div style="display: flex; align-items: center; justify-content: flex-start; gap: 1rem;">
        <svg class="nhsapp-icon nhsapp-icon__clock nhsapp-icon--black nhsapp-icon--32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="2rem" width="2rem" viewBox="0 0 24 24">
          <path d="M22.4301 10.7H21.2301C20.5901 5.79001 16.4001 1.99001 11.3201 1.99001C5.79006 1.99001 1.31006 6.47001 1.31006 12C1.31006 17.53 5.79006 22.01 11.3201 22.01C14.7301 22.01 17.7401 20.3 19.5501 17.69H19.5401C19.6401 17.55 19.7101 17.4 19.7101 17.22C19.7101 16.79 19.3601 16.45 18.9401 16.45C18.6901 16.45 18.4701 16.58 18.3301 16.77H18.3201C16.7801 18.97 14.2301 20.42 11.3301 20.42C6.63006 20.42 2.82006 16.61 2.82006 11.91C2.82006 7.21001 6.61006 3.40001 11.3201 3.40001C15.6101 3.40001 19.1401 6.57001 19.7301 10.7H18.7001C18.4901 10.7 18.3701 10.94 18.4901 11.11L20.3701 13.74C20.4701 13.89 20.6901 13.88 20.7901 13.74L22.6401 11.11C22.7601 10.94 22.6401 10.7 22.4301 10.7Z" />
          <path d="M13.8401 15.25C13.8401 15.25 13.8401 15.25 13.8501 15.26L13.8901 15.3C14.0001 15.39 14.1401 15.44 14.2901 15.44C14.6401 15.44 14.9301 15.15 14.9301 14.8C14.9301 14.64 14.8701 14.49 14.7701 14.37L14.7501 14.35C14.7501 14.35 14.7501 14.35 14.7401 14.34L11.6901 11.45V6.46001C11.6601 6.14001 11.3901 5.88001 11.0501 5.88001C10.7101 5.88001 10.4401 6.14001 10.4101 6.46001V6.51001C10.4101 6.51001 10.4101 6.52001 10.4101 6.53001V12.01L13.8301 15.26L13.8401 15.25Z" />
        </svg>
        <div>
          <p class="nhsuk-u-font-weight-bold nhsuk-body-m nhsuk-u-margin-bottom-0">Long Stay</p>
          <p class="nhsuk-body-s nhsuk-u-secondary-text-colour nhsuk-u-margin-bottom-0">Plan to stay between 2 to 8 hours</p>
        </div>
      </div>
    ' 
  }
}) }}

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Use when the card content is informational only and requires no user interaction.

Open this example (Card link) in a new tab 
<div class="nhsapp-card">
  <div class="nhsapp-card__container">
    <div class="nhsapp-card__content">
      <p class="nhsapp-card__title nhsuk-u-font-size-22">
        Orthopaedic appointment
      </p>
      <p
        class="nhsuk-u-font-weight-bold nhsuk-u-margin-top-1 nhsuk-u-margin-bottom-3"
      >
        Monday 3 June 2024 <br />
        9:40am
      </p>
      <p>The Willows, Croydon University Hospital</p>
    </div>
  </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.

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.

Name Type Required Description
title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
href string conditional Makes the title a link when provided.
linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
titleClasses string no Classes for the title element.
containerClasses string no Classes for the inner container.
description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
descriptionHtml string conditional HTML description (allows markup). Overrides description.
descriptionClasses string no Classes for the description.
aboveContent.html string no HTML shown above the title (for example a tag).
footer.html string no HTML shown in the footer.
img{}.src string conditional Image URL. Adds an image section when present.
img{}.alt string no Image alt text. Leave empty only if purely decorative.
badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
badgeLarge{}.label string yes Visually hidden text read after the number.
badgeLarge{}.id string no ID attribute for the badge.
badgeLarge{}.classes string no Classes for the badge.
badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
id string no ID for the card.
classes string no Classes for the card.
attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

{{ nhsappCard({
  title: 'Orthopaedic appointment',
  titleClasses: 'nhsuk-u-font-size-22',
  descriptionHtml: '
    <p class="nhsuk-u-font-weight-bold nhsuk-u-margin-top-1 nhsuk-u-margin-bottom-3">Monday 3 June 2024 <br> 9:40am</p>
    <p>The Willows, Croydon University Hospital</p>
  '
}) }}

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Multiple card links placed together must be marked up as lists in the HTML code. This helps screen reader users to navigate the content, for example by letting them know how many items there are in the list.

Use grouped card links to separate distinct groups of content or actions. Each card is visually independent.

Open this example (Card link) in a new tab 
<ul class="nhsapp-cards">
  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a
          href="#"
          class="nhsapp-card__link nhsuk-link--no-visited-state nhsuk-u-font-size-22"
          aria-label="Orthopaedic appointment on Friday 7 June 2024 at 8:30am, at The Willows, Croydon University Hospital"
        >
          Orthopaedic appointment
        </a>
        <p
          aria-hidden="true"
          class="nhsuk-u-font-weight-bold nhsuk-u-margin-top-1 nhsuk-u-margin-bottom-3"
        >
          Friday 7 June 2024 <br />
          8:30am
        </p>
        <p aria-hidden="true">The Willows, Croydon University Hospital</p>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </div>
  </li>

  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a
          href="#"
          class="nhsapp-card__link nhsuk-link--no-visited-state nhsuk-u-font-size-22"
          aria-label="Orthopaedic appointment on Monday 3 June 2024 at 9:40am, at The Willows, Croydon University Hospital"
        >
          Orthopaedic appointment
        </a>
        <p
          aria-hidden="true"
          class="nhsuk-u-font-weight-bold nhsuk-u-margin-top-1 nhsuk-u-margin-bottom-3"
        >
          Monday 3 June 2024 <br />
          9:40am
        </p>
        <p aria-hidden="true">The Willows, Croydon University Hospital</p>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </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.

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.

Name Type Required Description
heading string conditional Text to use for the heding of the card group. If headingHtml is provided, the heading argument will be ignored.
headingHtml string conditional HTML to use for the heading of the card group. If headingHtml is provided, the heading argument will be ignored.
headingLevel number conditional Heading level (2–6) for the heading. Defaults to 2 when not set. If headingHtml is provided, the headingLevel argument will be ignored.
description string conditional Plain text shown under the group heading. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string conditional HTML version of the description. If descriptionHtml is provided, the description argument will be ignored..
stacked boolean no Adds nhsapp-cards--stacked class to card group.
isListItem boolean no If true (default) wrapper is <ul> with each card as <li>. If false uses <div> wrappers.
id string no ID for the card group.
classes string no Classes for the card group.
attributes object no HTML attributes for the card group (data-_ or aria-_).
cards array yes Array of card objects.
cards[]title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
cards[]href string conditional Makes the title a link when provided.
cards[]linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
cards[]headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
cards[]titleClasses string no Classes for the title element.
cards[]containerClasses string no Classes for the inner container.
cards[]description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
cards[]descriptionHtml string conditional HTML description (allows markup). Overrides description.
cards[]descriptionClasses string no Classes for the description.
cards[]aboveContent.html string no HTML shown above the title (for example a tag).
cards[]footer.html string no HTML shown in the footer.
cards[]img{}.src string conditional Image URL. Adds an image section when present.
cards[]img{}.alt string no Image alt text. Leave empty only if purely decorative.
cards[]badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
cards[]badgeLarge{}.label string yes Visually hidden text read after the number.
cards[]badgeLarge{}.id string no ID attribute for the badge.
cards[]badgeLarge{}.classes string no Classes for the badge.
cards[]badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
cards[]id string no ID for the card.
cards[]classes string no Classes for the card.
cards[]attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCardGroup %}
{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

{{ nhsappCardGroup({
  cards: [
    {
      title: 'Orthopaedic appointment',
      href: '#',
      titleClasses: 'nhsuk-u-font-size-22',
      linkAriaLabel: 'Orthopaedic appointment on Friday 7 June 2024 at 8:30am, at The Willows, Croydon University Hospital',
      descriptionHtml: '
        <p aria-hidden="true" class="nhsuk-u-font-weight-bold nhsuk-u-margin-top-1 nhsuk-u-margin-bottom-3">Friday 7 June 2024 <br> 8:30am</p>
        <p aria-hidden="true">The Willows, Croydon University Hospital</p>
      '
    },
    {
      title: 'Orthopaedic appointment',
      href: '#',
      titleClasses: 'nhsuk-u-font-size-22',
      linkAriaLabel: 'Orthopaedic appointment on Monday 3 June 2024 at 9:40am, at The Willows, Croydon University Hospital',
      descriptionHtml: '
        <p aria-hidden="true" class="nhsuk-u-font-weight-bold nhsuk-u-margin-top-1 nhsuk-u-margin-bottom-3">Monday 3 June 2024 <br> 9:40am</p>
        <p aria-hidden="true">The Willows, Croydon University Hospital</p>
      '
    }
  ]
}) }}

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Use stacked card links to show multiple items within a single group, such as different sections of the same service or related tasks.

Open this example (Card link) in a new tab 
<ul class="nhsapp-cards nhsapp-cards--stacked">
  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          GP health record
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </div>
  </li>

  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          View and manage prescriptions
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </div>
  </li>

  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          Upcoming and past appointments
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </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.

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.

Name Type Required Description
heading string conditional Text to use for the heding of the card group. If headingHtml is provided, the heading argument will be ignored.
headingHtml string conditional HTML to use for the heading of the card group. If headingHtml is provided, the heading argument will be ignored.
headingLevel number conditional Heading level (2–6) for the heading. Defaults to 2 when not set. If headingHtml is provided, the headingLevel argument will be ignored.
description string conditional Plain text shown under the group heading. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string conditional HTML version of the description. If descriptionHtml is provided, the description argument will be ignored..
stacked boolean no Adds nhsapp-cards--stacked class to card group.
isListItem boolean no If true (default) wrapper is <ul> with each card as <li>. If false uses <div> wrappers.
id string no ID for the card group.
classes string no Classes for the card group.
attributes object no HTML attributes for the card group (data-_ or aria-_).
cards array yes Array of card objects.
cards[]title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
cards[]href string conditional Makes the title a link when provided.
cards[]linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
cards[]headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
cards[]titleClasses string no Classes for the title element.
cards[]containerClasses string no Classes for the inner container.
cards[]description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
cards[]descriptionHtml string conditional HTML description (allows markup). Overrides description.
cards[]descriptionClasses string no Classes for the description.
cards[]aboveContent.html string no HTML shown above the title (for example a tag).
cards[]footer.html string no HTML shown in the footer.
cards[]img{}.src string conditional Image URL. Adds an image section when present.
cards[]img{}.alt string no Image alt text. Leave empty only if purely decorative.
cards[]badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
cards[]badgeLarge{}.label string yes Visually hidden text read after the number.
cards[]badgeLarge{}.id string no ID attribute for the badge.
cards[]badgeLarge{}.classes string no Classes for the badge.
cards[]badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
cards[]id string no ID for the card.
cards[]classes string no Classes for the card.
cards[]attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCardGroup %}
{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

{{ nhsappCardGroup({
  stacked: true,
  cards: [
    {
      title: 'GP health record',
      href: '#'
    },
    {
      title: 'View and manage prescriptions',
      href: '#'
    },
    {
      title: 'Upcoming and past appointments',
      href: '#'
    }
  ]
}) }}

To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Use secondary card links below primary card links which signpost more important information.

Open this example (Card link secondary stacked) in a new tab 
<ul class="nhsapp-cards nhsapp-cards--stacked">
  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          Login and security
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </div>
  </li>

  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          Face ID
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </div>
  </li>
</ul>

<ul class="nhsapp-cards nhsapp-cards--stacked nhsapp-cards--secondary">
  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          Privacy and legal policies
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </div>
  </li>

  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          Join our user research panel
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </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.

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.

Name Type Required Description
heading string conditional Text to use for the heding of the card group. If headingHtml is provided, the heading argument will be ignored.
headingHtml string conditional HTML to use for the heading of the card group. If headingHtml is provided, the heading argument will be ignored.
headingLevel number conditional Heading level (2–6) for the heading. Defaults to 2 when not set. If headingHtml is provided, the headingLevel argument will be ignored.
description string conditional Plain text shown under the group heading. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string conditional HTML version of the description. If descriptionHtml is provided, the description argument will be ignored..
stacked boolean no Adds nhsapp-cards--stacked class to card group.
isListItem boolean no If true (default) wrapper is <ul> with each card as <li>. If false uses <div> wrappers.
id string no ID for the card group.
classes string no Classes for the card group.
attributes object no HTML attributes for the card group (data-_ or aria-_).
cards array yes Array of card objects.
cards[]title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
cards[]href string conditional Makes the title a link when provided.
cards[]linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
cards[]headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
cards[]titleClasses string no Classes for the title element.
cards[]containerClasses string no Classes for the inner container.
cards[]description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
cards[]descriptionHtml string conditional HTML description (allows markup). Overrides description.
cards[]descriptionClasses string no Classes for the description.
cards[]aboveContent.html string no HTML shown above the title (for example a tag).
cards[]footer.html string no HTML shown in the footer.
cards[]img{}.src string conditional Image URL. Adds an image section when present.
cards[]img{}.alt string no Image alt text. Leave empty only if purely decorative.
cards[]badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
cards[]badgeLarge{}.label string yes Visually hidden text read after the number.
cards[]badgeLarge{}.id string no ID attribute for the badge.
cards[]badgeLarge{}.classes string no Classes for the badge.
cards[]badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
cards[]id string no ID for the card.
cards[]classes string no Classes for the card.
cards[]attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCardGroup %}
{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

{{ nhsappCardGroup({
  stacked: true,
  cards: [
    {
      title: 'Login and security',
      href: '#'
    },
    {
      title: 'Face ID',
      href: '#'
    }
  ]
}) }}

{{ nhsappCardGroup({
  stacked: true,
  classes: 'nhsapp-cards--secondary',
  cards: [
    {
      title: 'Privacy and legal policies',
      href: '#'
    },
    {
      title: 'Join our user research panel',
      href: '#'
    }
  ]
}) }}

To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Using headings

Break up long lists of card links by using headings. It makes pages easier to scan and helps screen reader users to navigate.

Open this example (Card link) in a new tab 
<h2 class="nhsapp-cards__heading">Your GP services</h2>

<ul class="nhsapp-cards nhsapp-cards--stacked">
  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          Request repeat prescriptions
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </div>
  </li>

  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          Contact your GP surgery for a document or update
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </div>
  </li>

  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          Check for available GP appointments
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </div>
  </li>
</ul>

<h2 class="nhsapp-cards__heading">Other NHS services</h2>

<ul class="nhsapp-cards nhsapp-cards--stacked">
  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          Book
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </div>
  </li>

  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          Request prescriptions
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </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.

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.

Name Type Required Description
heading string conditional Text to use for the heding of the card group. If headingHtml is provided, the heading argument will be ignored.
headingHtml string conditional HTML to use for the heading of the card group. If headingHtml is provided, the heading argument will be ignored.
headingLevel number conditional Heading level (2–6) for the heading. Defaults to 2 when not set. If headingHtml is provided, the headingLevel argument will be ignored.
description string conditional Plain text shown under the group heading. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string conditional HTML version of the description. If descriptionHtml is provided, the description argument will be ignored..
stacked boolean no Adds nhsapp-cards--stacked class to card group.
isListItem boolean no If true (default) wrapper is <ul> with each card as <li>. If false uses <div> wrappers.
id string no ID for the card group.
classes string no Classes for the card group.
attributes object no HTML attributes for the card group (data-_ or aria-_).
cards array yes Array of card objects.
cards[]title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
cards[]href string conditional Makes the title a link when provided.
cards[]linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
cards[]headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
cards[]titleClasses string no Classes for the title element.
cards[]containerClasses string no Classes for the inner container.
cards[]description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
cards[]descriptionHtml string conditional HTML description (allows markup). Overrides description.
cards[]descriptionClasses string no Classes for the description.
cards[]aboveContent.html string no HTML shown above the title (for example a tag).
cards[]footer.html string no HTML shown in the footer.
cards[]img{}.src string conditional Image URL. Adds an image section when present.
cards[]img{}.alt string no Image alt text. Leave empty only if purely decorative.
cards[]badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
cards[]badgeLarge{}.label string yes Visually hidden text read after the number.
cards[]badgeLarge{}.id string no ID attribute for the badge.
cards[]badgeLarge{}.classes string no Classes for the badge.
cards[]badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
cards[]id string no ID for the card.
cards[]classes string no Classes for the card.
cards[]attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCardGroup %}
{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

{{ nhsappCardGroup({
  stacked: true,
  heading: 'Your GP services',
  cards: [
    {
      title: 'Request repeat prescriptions',
      href: '#'
    },
    {
      title: 'Contact your GP surgery for a document or update',
      href: '#'
    },
    {
      title: 'Check for available GP appointments',
      href: '#'
    }
  ]
}) }}

{{ nhsappCardGroup({
  stacked: true,
  heading: 'Other NHS services',
  cards: [
    {
      title: 'Book',
      href: '#'
    },
    {
      title: 'Request prescriptions',
      href: '#'
    }
  ]
}) }}

You can add custom HTML to the heading using headingHtml.

Open this example (Card link group with custom heading) in a new tab 
<div
  class="nhsapp-cards__heading"
  style="justify-content: space-between; align-items: center; display: flex"
>
  <h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-0">Services</h2>
  <a
    class="nhsuk-u-font-size-19 nhsuk-link nhsuk-link--no-visited-state nhsuk-u-nowrap"
    href="#"
    >View all <span class="nhsuk-u-visually-hidden">services</span></a
  >
</div>

<ul class="nhsapp-cards nhsapp-cards--stacked">
  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          Request repeat prescriptions
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </div>
  </li>

  <li class="nhsapp-card">
    <div class="nhsapp-card__container">
      <div class="nhsapp-card__content">
        <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
          Check if you need urgent medical help using 111 online
        </a>
      </div>

      <svg
        class="nhsapp-icon nhsapp-icon--chevron-right"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        height="2rem"
        width="2rem"
        viewBox="0 0 24 24"
      >
        <path
          d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
        />
      </svg>
    </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.

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.

Name Type Required Description
heading string conditional Text to use for the heding of the card group. If headingHtml is provided, the heading argument will be ignored.
headingHtml string conditional HTML to use for the heading of the card group. If headingHtml is provided, the heading argument will be ignored.
headingLevel number conditional Heading level (2–6) for the heading. Defaults to 2 when not set. If headingHtml is provided, the headingLevel argument will be ignored.
description string conditional Plain text shown under the group heading. If descriptionHtml is provided, the description argument will be ignored.
descriptionHtml string conditional HTML version of the description. If descriptionHtml is provided, the description argument will be ignored..
stacked boolean no Adds nhsapp-cards--stacked class to card group.
isListItem boolean no If true (default) wrapper is <ul> with each card as <li>. If false uses <div> wrappers.
id string no ID for the card group.
classes string no Classes for the card group.
attributes object no HTML attributes for the card group (data-_ or aria-_).
cards array yes Array of card objects.
cards[]title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
cards[]href string conditional Makes the title a link when provided.
cards[]linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
cards[]headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
cards[]titleClasses string no Classes for the title element.
cards[]containerClasses string no Classes for the inner container.
cards[]description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
cards[]descriptionHtml string conditional HTML description (allows markup). Overrides description.
cards[]descriptionClasses string no Classes for the description.
cards[]aboveContent.html string no HTML shown above the title (for example a tag).
cards[]footer.html string no HTML shown in the footer.
cards[]img{}.src string conditional Image URL. Adds an image section when present.
cards[]img{}.alt string no Image alt text. Leave empty only if purely decorative.
cards[]badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
cards[]badgeLarge{}.label string yes Visually hidden text read after the number.
cards[]badgeLarge{}.id string no ID attribute for the badge.
cards[]badgeLarge{}.classes string no Classes for the badge.
cards[]badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
cards[]id string no ID for the card.
cards[]classes string no Classes for the card.
cards[]attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCardGroup %}
{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

{{ nhsappCardGroup({
  stacked: true,
  headingHtml: '<div class="nhsapp-cards__heading" style="justify-content: space-between; align-items: center; display: flex;">
                  <h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-0">Services</h2>
                  <a class="nhsuk-u-font-size-19 nhsuk-link nhsuk-link--no-visited-state nhsuk-u-nowrap" href="#">View all <span class="nhsuk-u-visually-hidden">services</span></a> 
                </div>',
  cards: [
    {
      title: 'Request repeat prescriptions',
      href: '#'
    },
    {
      title: 'Check if you need urgent medical help using 111 online',
      href: '#'
    }
  ]
}) }}

Accessibility

Screen reader users often navigate by pulling up a list of all the links on a page. When they do this, they only hear the link text, not the content around it.

This means your linkAriaLabel must include all the important information from the card. It needs to make sense on its own, out of context.

In this example, a sighted user sees the date, location and 'Action needed' tag laid out visually. A screen reader user hears all of this in the linkAriaLabel: "Action needed: Orthopaedic appointment on Monday 3 June 2024 at 9:40am, at The Willows, Croydon University Hospital".

Open this example (Card link accessibility) in a new tab 
<div class="nhsapp-card">
  <div class="nhsapp-card__container">
    <div class="nhsapp-card__content">
      <div class="nhsapp-card__above">
        <span
          class="nhsapp-tag nhsapp-tag--red nhsuk-u-margin-bottom-3"
          aria-hidden="true"
        >
          Action needed
        </span>
      </div>
      <a
        href="#"
        class="nhsapp-card__link nhsuk-link--no-visited-state nhsuk-u-font-size-22"
        aria-label="Action needed: Orthopaedic appointment on Monday 3 June 2024 at 9:40am, at The Willows, Croydon University Hospital"
      >
        Orthopaedic appointment
      </a>
      <p
        aria-hidden="true"
        class="nhsuk-u-font-weight-bold nhsuk-u-margin-top-1 nhsuk-u-margin-bottom-3"
      >
        Monday 3 June 2024 <br />
        9:40am
      </p>
      <p aria-hidden="true">The Willows, Croydon University Hospital</p>
    </div>

    <svg
      class="nhsapp-icon nhsapp-icon--chevron-right"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
      height="2rem"
      width="2rem"
      viewBox="0 0 24 24"
    >
      <path
        d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
      />
    </svg>
  </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.

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.

Name Type Required Description
title string yes The card title text. Renders as: link (if href), heading (if headingLevel and no href), else a paragraph.
href string conditional Makes the title a link when provided.
linkAriaLabel string no aria-label for the title link. Use only if the visible text is not clear.
headingLevel number conditional Heading level (2–6) used only when there is no href. If not set (and no href) the title is a paragraph.
titleClasses string no Classes for the title element.
containerClasses string no Classes for the inner container.
description string conditional Plain text description below the title. Ignored if descriptionHtml is given.
descriptionHtml string conditional HTML description (allows markup). Overrides description.
descriptionClasses string no Classes for the description.
aboveContent.html string no HTML shown above the title (for example a tag).
footer.html string no HTML shown in the footer.
img{}.src string conditional Image URL. Adds an image section when present.
img{}.alt string no Image alt text. Leave empty only if purely decorative.
badgeLarge{}.count number conditional Number for the large badge. Badge appears only when count > 0.
badgeLarge{}.label string yes Visually hidden text read after the number.
badgeLarge{}.id string no ID attribute for the badge.
badgeLarge{}.classes string no Classes for the badge.
badgeLarge{}.attributes object no HTML attributes for the badge (e.g. data-*, aria-*).
id string no ID for the card.
classes string no Classes for the card.
attributes object no HTML attributes for the card (e.g. data-*, aria-*). 

{% from 'nhsapp/components/card/macro.njk' import nhsappCard %}
{% from 'nhsapp/components/tag/macro.njk' import nhsappTag %}

{% set tag %}
  {{ nhsappTag({ 
    text: 'Action needed', 
    classes: 'nhsapp-tag--red nhsuk-u-margin-bottom-3',
    attributes: { 
      'aria-hidden': 'true' 
    }
  }) }}
{% endset %}

{{ nhsappCard({
  title: 'Orthopaedic appointment',
  href: '#',
  titleClasses: 'nhsuk-u-font-size-22',
  linkAriaLabel: 'Action needed: Orthopaedic appointment on Monday 3 June 2024 at 9:40am, at The Willows, Croydon University Hospital',
  descriptionHtml: '
    <p aria-hidden="true" class="nhsuk-u-font-weight-bold nhsuk-u-margin-top-1 nhsuk-u-margin-bottom-3">Monday 3 June 2024 <br> 9:40am</p>
    <p aria-hidden="true">The Willows, Croydon University Hospital</p>
  ',
  aboveContent: { html: tag }
}) }}

To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

You can mark the visual content as aria-hidden="true" because it's already in the link label. This stops screen reader users hearing the same information twice.

Before you hide content with aria-hidden="true", check it appears in the linkAriaLabel. If it does not, do not hide it. Screen reader users will miss it when they navigate through links.

Research

In our research, people successfully navigated the NHS App and completed a range of tasks using short card links. They understood the meaning of the links despite the short amount of text.

Some people overlooked description text when it was included in card links.

Help improve this component

The NHS App design system team would like to hear:

  • how you have used this component in your service
  • any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the 'Card links' discussion on GitHub.