Navigation - Card

When to use a card

Use a card to give users a brief summary of content or a task, often with a link to more detail. You can display a card alongside other cards to group related content or tasks.

Use clickable cards on hub pages to signpost groupings of related content and help users navigate to the content they need.

You can use a basic, non-clickable card on content pages.

These cards are different from the pattern to help users decide when and where to get care (care cards).

How to use cards

Make cards easy to scan for relevant and actionable information.

You can include multiple elements, such as a title, text, an image and links. If you include a link, the link should mirror the heading of the page it links to.

Clickable cards

If the card contains a single link, you can make the hit area for the link wrap the entire card. We avoid wrapping an entire card in an anchor tag as this can be a difficult experience for screen reader users.

Top task card

Open this example in new window

HTML

Copy code

<ul class="nhsuk-grid-row">
  <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">

    <div class="nhsuk-card nhsuk-card--clickable">
      <div class="nhsuk-card__content">
        <h5 class="nhsuk-card__heading nhsuk-heading-xs">
          <a class="nhsuk-card__link" href="#">Order a repeat prescription</a>
        </h5>

      </div>
    </div>

  </li>
</ul>

Nunjucks

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.

Nunjucks arguments for top task card
Name	Type	Required	Description
Name heading	Type string	Required true	Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml	Type string	Required true	Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses	Type string	Required false	Description Classes to add to the card heading.
Name headingLevel	Type integer	Required false	Description Optional heading level for the card heading. Default: 2
Name href	Type string	Required false	Description The value of the card link href attribute.
Name clickable	Type boolean	Required false	Description If set to true, then the whole Card will become a clickable Card variant.
Name feature	Type boolean	Required false	Description If set to true, then the Card will become a feature Card variant.
Name imgURL	Type string	Required false	Description The URL of the image in the card.
Name imgALT	Type string	Required false	Description The alternative text of the image in the card.
Name description	Type string	Required false	Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml	Type string	Required false	Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes	Type string	Required false	Description Classes to add to the card.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the card.

Copy code

{% from 'card/macro.njk' import card %}

<ul class="nhsuk-grid-row">
  <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
    {{ card({
      "href": "#",
      "clickable": "true",
      "headingLevel": 5,
      "heading": "Order a repeat prescription",
      "headingClasses": "nhsuk-heading-xs"
    }) }}
  </li>
</ul>

Top task cards are small clickable cards.

Use them at the top of hub pages above other cards (such as primary cards) to help users quickly access specific information or tasks buried deeper in the navigation. Use them as shortcuts to content or services that are popular with users or meet an important business need.

If you want to link to a page just below the hub page, use a primary card instead.

Do not use more than 3 top tasks on a hub page.

Example

The NHS services hub page on the NHS website uses 3 top task cards to help people get help quickly.

Primary card (with chevron)

Open this example in new window

HTML

Copy code

<ul class="nhsuk-grid-row">
  <li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">

    <div class="nhsuk-card nhsuk-card--clickable">
      <div class="nhsuk-card__content nhsuk-card__content--primary">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">Introduction to care and support</a>
        </h2>
        <p class="nhsuk-card__description">A quick guide for people who have care and support needs and their carers</p>

        <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
          <circle cx="13.333" cy="13.333" r="13.333" fill="" />
          <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
            <path d="M15.438 13l-3.771 3.771" />
            <path data-name="Path" d="M11.667 9.229L15.438 13" />
          </g>
        </svg>

      </div>
    </div>

  </li>
</ul>

Nunjucks

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.

Nunjucks arguments for primary card card
Name	Type	Required	Description
Name heading	Type string	Required true	Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml	Type string	Required true	Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses	Type string	Required false	Description Classes to add to the card heading.
Name headingLevel	Type integer	Required false	Description Optional heading level for the card heading. Default: 2
Name href	Type string	Required false	Description The value of the card link href attribute.
Name clickable	Type boolean	Required false	Description If set to true, then the whole Card will become a clickable Card variant.
Name feature	Type boolean	Required false	Description If set to true, then the Card will become a feature Card variant.
Name imgURL	Type string	Required false	Description The URL of the image in the card.
Name imgALT	Type string	Required false	Description The alternative text of the image in the card.
Name description	Type string	Required false	Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml	Type string	Required false	Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes	Type string	Required false	Description Classes to add to the card.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the card.

Copy code

{% from 'card/macro.njk' import card %}

<ul class="nhsuk-grid-row">
  <li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">
  {{ card({
    "href": "#",
    "primary": "true",
    "clickable": "true",
    "heading": "Introduction to care and support",
    "headingClasses": "nhsuk-heading-m",
    "description": "A quick guide for people who have care and support needs and their carers"
  }) }}
  </li>
</ul>

Use primary cards on hub pages to signpost groups of information that are important to users.

You can include a primary card that links to a single page at a lower level if other primary cards on the same hub page link to groups of content.

The chevron icon (from our icon set) helps users know the card will take them to more content. The size of the card helps them understand that the topics these cards link to are more frequently visited or more important than topics signposted by secondary cards.

Example

The Social care and support guide hub page on the NHS website routes users to different social care topics using primary cards.

Primary cards with chevrons replace a similar clickable card without a chevron which is being phased out.

Secondary card

Open this example in new window

HTML

Copy code

<ul class="nhsuk-grid-row">
  <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 nhsuk-card__content--secondary">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">Urgent and emergency care services</a>
        </h2>
        <p class="nhsuk-card__description">Services the NHS provides if you need urgent or emergency medical help</p>

      </div>
    </div>

  </li>
</ul>

Nunjucks

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.

Nunjucks arguments for secondary card card
Name	Type	Required	Description
Name heading	Type string	Required true	Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml	Type string	Required true	Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses	Type string	Required false	Description Classes to add to the card heading.
Name headingLevel	Type integer	Required false	Description Optional heading level for the card heading. Default: 2
Name href	Type string	Required false	Description The value of the card link href attribute.
Name clickable	Type boolean	Required false	Description If set to true, then the whole Card will become a clickable Card variant.
Name feature	Type boolean	Required false	Description If set to true, then the Card will become a feature Card variant.
Name imgURL	Type string	Required false	Description The URL of the image in the card.
Name imgALT	Type string	Required false	Description The alternative text of the image in the card.
Name description	Type string	Required false	Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml	Type string	Required false	Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes	Type string	Required false	Description Classes to add to the card.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the card.

Copy code

{% from 'card/macro.njk' import card %}

<ul class="nhsuk-grid-row">
  <li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">
  {{ card({
    "href": "#",
    "clickable": "true",
    "secondary": "true",
    "heading": "Urgent and emergency care services",
    "headingClasses": "nhsuk-heading-m",
    "description": "Services the NHS provides if you need urgent or emergency medical help"
  }) }}
  </li>
</ul>

Use secondary cards on hub pages to signpost groups of information on less important topics. Use them below primary cards which signpost important information.

Secondary cards have less visual impact than top tasks or primary cards.

Example

The NHS services hub page on the NHS website has secondary cards at the bottom of the page for topics that are less searched for.

Card with an image

Open this example in new window

HTML

Copy code

<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>

Nunjucks

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.

Nunjucks arguments for with image card
Name	Type	Required	Description
Name heading	Type string	Required true	Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml	Type string	Required true	Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses	Type string	Required false	Description Classes to add to the card heading.
Name headingLevel	Type integer	Required false	Description Optional heading level for the card heading. Default: 2
Name href	Type string	Required false	Description The value of the card link href attribute.
Name clickable	Type boolean	Required false	Description If set to true, then the whole Card will become a clickable Card variant.
Name feature	Type boolean	Required false	Description If set to true, then the Card will become a feature Card variant.
Name imgURL	Type string	Required false	Description The URL of the image in the card.
Name imgALT	Type string	Required false	Description The alternative text of the image in the card.
Name description	Type string	Required false	Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml	Type string	Required false	Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes	Type string	Required false	Description Classes to add to the card.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the card.

Copy code

{% from 'card/macro.njk' import card %}

{{ card({
  "imgURL": "https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg",
  "href": "#",
  "clickable": "true",
  "heading": "Exercise",
  "headingClasses": "nhsuk-heading-m",
  "description": "Programmes, workouts and tips to get you moving and improve your fitness and wellbeing"
}) }}

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

The card image is set as a decorative image by default, with the alternative text being null.

Non-clickable basic card

Open this example in new window

HTML

Copy code

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      If you need help now, but it’s not an emergency

    </h3>
    <p class="nhsuk-card__description">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a></p>

  </div>
</div>

Nunjucks

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.

Nunjucks arguments for default card
Name	Type	Required	Description
Name heading	Type string	Required true	Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml	Type string	Required true	Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses	Type string	Required false	Description Classes to add to the card heading.
Name headingLevel	Type integer	Required false	Description Optional heading level for the card heading. Default: 2
Name href	Type string	Required false	Description The value of the card link href attribute.
Name clickable	Type boolean	Required false	Description If set to true, then the whole Card will become a clickable Card variant.
Name feature	Type boolean	Required false	Description If set to true, then the Card will become a feature Card variant.
Name imgURL	Type string	Required false	Description The URL of the image in the card.
Name imgALT	Type string	Required false	Description The alternative text of the image in the card.
Name description	Type string	Required false	Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml	Type string	Required false	Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes	Type string	Required false	Description Classes to add to the card.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the card.

Copy code

{% from 'card/macro.njk' import card %}

{{ card({
  "heading": "If you need help now, but it’s not an emergency",
  "headingLevel": "3",
  "descriptionHtml": "<p class=\"nhsuk-card__description\">Go to <a href=\"#\">111.nhs.uk</a> or <a href=\"#\">call 111</a></p>"
}) }}

Use basic cards on content pages, not hub pages.

Consider using these components instead:

Grouping cards

You can group multiple cards to show a collection of related topics. Prioritise the cards so the content users need most comes first.

Use different card styles to help users understand the importance of different groups of cards.

Example

The Live Well hub page on the NHS website helps users see the breadth of information available. It groups, ranks and links to content on different topics using:

top task cards
primary cards
secondary cards

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 new window

HTML

Copy code

<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">
      <div class="nhsuk-card__content nhsuk-card__content--primary">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">Introduction to care and support</a>
        </h2>
        <p class="nhsuk-card__description">A quick guide for people who have care and support needs and their carers</p>

        <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
          <circle cx="13.333" cy="13.333" r="13.333" fill="" />
          <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
            <path d="M15.438 13l-3.771 3.771" />
            <path data-name="Path" d="M11.667 9.229L15.438 13" />
          </g>
        </svg>

      </div>
    </div>

  </li>
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">

    <div class="nhsuk-card nhsuk-card--clickable">
      <div class="nhsuk-card__content nhsuk-card__content--primary">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">Help from social services and charities</a>
        </h2>
        <p class="nhsuk-card__description">Includes helplines, needs assessments, advocacy and reporting abuse.</p>

        <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
          <circle cx="13.333" cy="13.333" r="13.333" fill="" />
          <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
            <path d="M15.438 13l-3.771 3.771" />
            <path data-name="Path" d="M11.667 9.229L15.438 13" />
          </g>
        </svg>

      </div>
    </div>

  </li>
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">

    <div class="nhsuk-card nhsuk-card--clickable">
      <div class="nhsuk-card__content nhsuk-card__content--primary">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">Care services, equipment and care homes</a>
        </h2>
        <p class="nhsuk-card__description">Includes home adaptations, help at home from a carer, social care you can get for free and housing.</p>

        <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
          <circle cx="13.333" cy="13.333" r="13.333" fill="" />
          <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
            <path d="M15.438 13l-3.771 3.771" />
            <path data-name="Path" d="M11.667 9.229L15.438 13" />
          </g>
        </svg>

      </div>
    </div>

  </li>
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">

    <div class="nhsuk-card nhsuk-card--clickable">
      <div class="nhsuk-card__content nhsuk-card__content--primary">
        <h2 class="nhsuk-card__heading nhsuk-heading-m">
          <a class="nhsuk-card__link" href="#">Money, work and benefits</a>
        </h2>
        <p class="nhsuk-card__description">How to pay for care and support, and where you can get help with costs</p>

        <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
          <circle cx="13.333" cy="13.333" r="13.333" fill="" />
          <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
            <path d="M15.438 13l-3.771 3.771" />
            <path data-name="Path" d="M11.667 9.229L15.438 13" />
          </g>
        </svg>

      </div>
    </div>

  </li>
</ul>

Nunjucks

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.

Nunjucks arguments for group half card
Name	Type	Required	Description
Name heading	Type string	Required true	Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml	Type string	Required true	Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses	Type string	Required false	Description Classes to add to the card heading.
Name headingLevel	Type integer	Required false	Description Optional heading level for the card heading. Default: 2
Name href	Type string	Required false	Description The value of the card link href attribute.
Name clickable	Type boolean	Required false	Description If set to true, then the whole Card will become a clickable Card variant.
Name feature	Type boolean	Required false	Description If set to true, then the Card will become a feature Card variant.
Name imgURL	Type string	Required false	Description The URL of the image in the card.
Name imgALT	Type string	Required false	Description The alternative text of the image in the card.
Name description	Type string	Required false	Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml	Type string	Required false	Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes	Type string	Required false	Description Classes to add to the card.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the card.

Copy code

{% 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({
      "href": "#",
      "primary": "true",
      "clickable": "true",
      "heading": "Introduction to care and support",
      "headingClasses": "nhsuk-heading-m",
      "description": "A quick guide for people who have care and support needs and their carers"
    }) }}
  </li>
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    {{ card({
      "href": "#",
      "primary": "true",
      "clickable": "true",
      "heading": "Help from social services and charities",
      "headingClasses": "nhsuk-heading-m",
      "description": "Includes helplines, needs assessments, advocacy and reporting abuse."
    }) }}
  </li>
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    {{ card({
      "href": "#",
      "primary": "true",
      "clickable": "true",
      "heading": "Care services, equipment and care homes",
      "headingClasses": "nhsuk-heading-m",
      "description": "Includes home adaptations, help at home from a carer, social care you can get for free and housing."
    }) }}
  </li>
  <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
    {{ card({
      "href": "#",
      "primary": "true",
      "clickable": "true",
      "heading": "Money, work and benefits",
      "headingClasses": "nhsuk-heading-m",
      "description": "How to pay for care and support, and where you can get help with costs"
    }) }}
  </li>
</ul>

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

Open this example in new window

HTML

Copy code

<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'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

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.

Nunjucks arguments for group third card
Name	Type	Required	Description
Name heading	Type string	Required true	Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml	Type string	Required true	Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses	Type string	Required false	Description Classes to add to the card heading.
Name headingLevel	Type integer	Required false	Description Optional heading level for the card heading. Default: 2
Name href	Type string	Required false	Description The value of the card link href attribute.
Name clickable	Type boolean	Required false	Description If set to true, then the whole Card will become a clickable Card variant.
Name feature	Type boolean	Required false	Description If set to true, then the Card will become a feature Card variant.
Name imgURL	Type string	Required false	Description The URL of the image in the card.
Name imgALT	Type string	Required false	Description The alternative text of the image in the card.
Name description	Type string	Required false	Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml	Type string	Required false	Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes	Type string	Required false	Description Classes to add to the card.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the card.

Copy code

{% 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({
      "href": "#",
      "clickable": "true",
      "heading": "5 steps to mental wellbeing",
      "headingClasses": "nhsuk-heading-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({
      "href": "#",
      "clickable": "true",
      "heading": "Healthy weight",
      "headingClasses": "nhsuk-heading-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({
      "href": "#",
      "clickable": "true",
      "heading": "Exercise",
      "headingClasses": "nhsuk-heading-m",
      "description": "Programmes, workouts and tips to get you moving and improve your fitness and wellbeing"
    }) }}
  </li>
</ul>

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

Open this example in new window

HTML

Copy code

<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">
        <p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">91 <span class="nhsuk-u-visually-hidden">Applicants</span></p><a href="#" class="nhsuk-card__link nhsuk-u-font-weight-normal nhsuk-u-font-size-19 nhsuk-link--no-visited-state">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">
        <p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">23 <span class="nhsuk-u-visually-hidden">Jobs</span></p><a href="#" class="nhsuk-card__link nhsuk-u-font-weight-normal nhsuk-u-font-size-19 nhsuk-link--no-visited-state">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">
        <p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">8 <span class="nhsuk-u-visually-hidden">Services</span></p><a href="#" class="nhsuk-card__link nhsuk-u-font-weight-normal nhsuk-u-font-size-19 nhsuk-link--no-visited-state">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">
        <p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">33 <span class="nhsuk-u-visually-hidden">Messages</span></p><a href="#" class="nhsuk-card__link nhsuk-u-font-weight-normal nhsuk-u-font-size-19 nhsuk-link--no-visited-state">Messages</a>

      </div>
    </div>

  </li>
</ul>

Nunjucks

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.

Nunjucks arguments for group quarter card
Name	Type	Required	Description
Name heading	Type string	Required true	Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml	Type string	Required true	Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses	Type string	Required false	Description Classes to add to the card heading.
Name headingLevel	Type integer	Required false	Description Optional heading level for the card heading. Default: 2
Name href	Type string	Required false	Description The value of the card link href attribute.
Name clickable	Type boolean	Required false	Description If set to true, then the whole Card will become a clickable Card variant.
Name feature	Type boolean	Required false	Description If set to true, then the Card will become a feature Card variant.
Name imgURL	Type string	Required false	Description The URL of the image in the card.
Name imgALT	Type string	Required false	Description The alternative text of the image in the card.
Name description	Type string	Required false	Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml	Type string	Required false	Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes	Type string	Required false	Description Classes to add to the card.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the card.

Copy code

{% 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">
    {{ card({
      "clickable": "true",
      "headingHtml": "<p class=\"nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1\">91 <span class=\"nhsuk-u-visually-hidden\">Applicants</span></p><a href=\"#\" class=\"nhsuk-card__link nhsuk-u-font-weight-normal nhsuk-u-font-size-19 nhsuk-link--no-visited-state\">Applicants</a>"
    }) }}
  </li>
  <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
    {{ card({
      "clickable": "true",
      "headingHtml": "<p class=\"nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1\">23 <span class=\"nhsuk-u-visually-hidden\">Jobs</span></p><a href=\"#\" class=\"nhsuk-card__link nhsuk-u-font-weight-normal nhsuk-u-font-size-19 nhsuk-link--no-visited-state\">Jobs</a>"
    }) }}
  </li>
  <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
    {{ card({
      "clickable": "true",
      "headingHtml": "<p class=\"nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1\">8 <span class=\"nhsuk-u-visually-hidden\">Services</span></p><a href=\"#\" class=\"nhsuk-card__link nhsuk-u-font-weight-normal nhsuk-u-font-size-19 nhsuk-link--no-visited-state\">Services</a>"
    }) }}
  </li>
  <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
    {{ card({
      "clickable": "true",
      "headingHtml": "<p class=\"nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1\">33 <span class=\"nhsuk-u-visually-hidden\">Messages</span></p><a href=\"#\" class=\"nhsuk-card__link nhsuk-u-font-weight-normal nhsuk-u-font-size-19 nhsuk-link--no-visited-state\">Messages</a>"
    }) }}
  </li>
</ul>

Accessibility

Heading level and size

Use headings correctly to reflect the page structure. If you need to, change the level of the heading.

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

Open this example in new window

HTML

Copy code

<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

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.

Nunjucks arguments for heading level card
Name	Type	Required	Description
Name heading	Type string	Required true	Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml	Type string	Required true	Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses	Type string	Required false	Description Classes to add to the card heading.
Name headingLevel	Type integer	Required false	Description Optional heading level for the card heading. Default: 2
Name href	Type string	Required false	Description The value of the card link href attribute.
Name clickable	Type boolean	Required false	Description If set to true, then the whole Card will become a clickable Card variant.
Name feature	Type boolean	Required false	Description If set to true, then the Card will become a feature Card variant.
Name imgURL	Type string	Required false	Description The URL of the image in the card.
Name imgALT	Type string	Required false	Description The alternative text of the image in the card.
Name description	Type string	Required false	Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml	Type string	Required false	Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes	Type string	Required false	Description Classes to add to the card.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the card.

Copy code

{% 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.

Here's an example of using an h2 with an nhsuk-heading-s class to reduce the size of the heading:

Open this example in new window

HTML

Copy code

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-s">
      Heading level

    </h2>
    <p class="nhsuk-card__description">Card description text goes here</p>

  </div>
</div>

Nunjucks

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.

Nunjucks arguments for heading size card
Name	Type	Required	Description
Name heading	Type string	Required true	Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml	Type string	Required true	Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses	Type string	Required false	Description Classes to add to the card heading.
Name headingLevel	Type integer	Required false	Description Optional heading level for the card heading. Default: 2
Name href	Type string	Required false	Description The value of the card link href attribute.
Name clickable	Type boolean	Required false	Description If set to true, then the whole Card will become a clickable Card variant.
Name feature	Type boolean	Required false	Description If set to true, then the Card will become a feature Card variant.
Name imgURL	Type string	Required false	Description The URL of the image in the card.
Name imgALT	Type string	Required false	Description The alternative text of the image in the card.
Name description	Type string	Required false	Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml	Type string	Required false	Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes	Type string	Required false	Description Classes to add to the card.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the card.

Copy code

{% from 'card/macro.njk' import card %}

{{ card({
  "heading": "Heading level",
  "headingClasses": "nhsuk-heading-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

We tested 3 card variations as part of an iterative process to improve the NHS website's information architecture and navigation patterns:

top task cards
primary cards
secondary cards

We tested the cards in usability sessions and monitored analytics to understand how successful they were.

Have you tested this component?

If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.

Before you start, you will need a GitHub account. It's an open forum where we collect feedback.

Share your findings on GitHub

If you have any questions, you can message us on Slack. You will need a Slack account if you do not have one. Or you can contact us by email.

Updated: August 2023