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.
How it works
Cards should be easy to scan for relevant and actionable information. They can contain multiple elements, such as an image, title, text and links.
Cards are different from the pattern to help users decide when and where to get care (care cards).
Basic card
<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 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 |
---|---|---|---|
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. |
{% 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>"
}) }}
Clickable card
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.
<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="#">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>
</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 |
---|---|---|---|
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. |
{% from 'card/macro.njk' import card %}
{{ card({
"href": "#",
"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"
}) }}
Card with an image
<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 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 |
---|---|---|---|
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. |
{% 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"
}) }}
The card image is set as a decorative image by default, with the alternative text being null.
Card group
You can group multiple cards to show a collection of related topics. Prioritise the cards so the content users need most comes first.
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:
<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">
<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>
</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">
<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>
</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">
<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>
</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">
<h2 class="nhsuk-card__heading nhsuk-heading-m">
<a class="nhsuk-card__link" href="#">Care after a hospital stay</a>
</h2>
<p class="nhsuk-card__description">Includes hospital discharge and care and support afterwards</p>
</div>
</div>
</li>
</ul>
Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
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 |
---|---|---|---|
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. |
{% 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": "#",
"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": "#",
"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": "#",
"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>
<li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
{{ card({
"href": "#",
"clickable": "true",
"heading": "Care after a hospital stay",
"headingClasses": "nhsuk-heading-m",
"description": "Includes hospital discharge and care and support afterwards"
}) }}
</li>
</ul>
For thirds, use nhsuk-grid-column-one-third
:
<ul class="nhsuk-grid-row nhsuk-card-group">
<li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
<div class="nhsuk-card nhsuk-card--clickable">
<div class="nhsuk-card__content">
<h2 class="nhsuk-card__heading nhsuk-heading-m">
<a class="nhsuk-card__link" href="#">5 steps to mental wellbeing</a>
</h2>
<p class="nhsuk-card__description">Practical advice to help you feel mentally and emotionally better</p>
</div>
</div>
</li>
<li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
<div class="nhsuk-card nhsuk-card--clickable">
<div class="nhsuk-card__content">
<h2 class="nhsuk-card__heading nhsuk-heading-m">
<a class="nhsuk-card__link" href="#">Healthy weight</a>
</h2>
<p class="nhsuk-card__description">Check your BMI using our healthy weight calculator and find out if you're a healthy weight</p>
</div>
</div>
</li>
<li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
<div class="nhsuk-card nhsuk-card--clickable">
<div class="nhsuk-card__content">
<h2 class="nhsuk-card__heading nhsuk-heading-m">
<a class="nhsuk-card__link" href="#">Exercise</a>
</h2>
<p class="nhsuk-card__description">Programmes, workouts and tips to get you moving and improve your fitness and wellbeing</p>
</div>
</div>
</li>
</ul>
Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
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 |
---|---|---|---|
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. |
{% 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
:
<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 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 |
---|---|---|---|
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. |
{% 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
:
<div class="nhsuk-card">
<div class="nhsuk-card__content">
<h3 class="nhsuk-card__heading">
Heading level 3
</h3>
<p class="nhsuk-card__description">Card description text goes here</p>
</div>
</div>
Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
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 |
---|---|---|---|
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. |
{% 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:
<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 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 |
---|---|---|---|
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. |
{% 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
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.
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: November 2021