Card
Overview
Use the card component to help users navigate through your service. For example, this could be used on:
- homepages
- index pages
- hub pages
Important information:
For links to related content from an information page, use related content.
Important information:
To allow users to access a single service, use a hero.
Example Card contents
Nunjucks
{% from "components/card/_macro.njk" import onsCard %}
{{
onsCard({
"title": {
"id": 'card-example',
"text": 'Your data and security',
"url": '#0'
},
"body":{
"id": 'text',
"text": 'How we keep your data safe and what happens to your personal information.'
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| title | Object<Title> | true | An object containing title attributes for the card’s title. |
| image | Object<Image> or true | false | An object containing path attributes for the card’s image. If value is true will show placeholder with root as placeholderURL base path |
| body | Object<Body> | true | An object containing body attributes for the card’s body. |
| variant | string | false | A single value to adjust the component using available variants: “feature” |
| Name | Type | Required | Description |
|---|---|---|---|
| smallSrc | string | true | Path to the non-retina version of the image |
| largeSrc | string | false | Path to the retina version of the image |
| alt | string | false | The HTML alt tag to explain the appearance and function of the image. Not required if the image is only decorative |
| placeholderUrl | string | false | Optional base path for placeholder image |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the card title |
| subtitle | string | false | The text for the card subtitle |
| headingLevel | int | false | Number used to determine the heading level of the card title. Defaults to 2 |
| classes | string | false | Font size classes for the card title. Defaults to ons-u-fs-m |
| url | string | false | The URL for the title link href attribute |
| id | string | true | The HTML id attribute for the card title |
| Name | Type | Required | Description |
|---|---|---|---|
| figure | string | false | Headline figure for the card element |
| text | string | true | The excerpt text for the card element |
| id | string | true | The HTML id for the card text excerpt. Used for the card’s aria-describedBy attribute |
| itemsList | Array<ListItem> (ref) | false | A list of links for child items of the card |
HTML
<div class="ons-card">
<a href="#0" class="ons-card__link">
<h2 class="ons-card__title ons-u-fs-m" id="card-example"> Your data and security </h2>
</a>
<p id="text" class="ons-card__body">How we keep your data safe and what happens to your personal information.</p>
</div>When not to use this component
Only use cards in the <main> container of the page. Do not use them within an <aside> or <footer>.
How to use this component
The card component needs to be implemented using the grid foundation.
A row should contain no more than three or four cards and stack vertically on small viewports.
When using images in a card, use two versions of the image:
- one for standard screens (
303px width × 200px height) - one for retina screens (
606px width × 400px height)
Define a small and a large image path in the macro as smallSrc and largeSrc.
Variants
There are multiple variants of this component.
Card set
This is a row of three cards.
Example Card Set contents
Nunjucks
{% from "components/card/_macro.njk" import onsCard %}
<div class="ons-container">
<div class="ons-grid">
<div class="ons-grid__col ons-col-4@m">
{{
onsCard({
"title": {
"id": 'card-set-1',
"text": 'About the census',
"url": '#0'
},
"body":{
"id": 'text1',
"text": 'The census is a survey that gives us information about all the households in England and Wales.'
}
})
}}
</div>
<div class="ons-grid__col ons-col-4@m">
{{
onsCard({
"title": {
"id": 'card-set-2',
"text": 'Working on the census',
"url": '#0'
},
"body":{
"id": 'text2',
"text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.'
}
})
}}
</div>
<div class="ons-grid__col ons-col-4@m">
{{
onsCard({
"title": {
"id": 'card-set-3',
"text": 'Your data and security',
"url": '#0'
},
"body":{
"id": 'text3',
"text": 'How we keep your data safe and what happens to your personal information.'
}
})
}}
</div>
</div>
</div>
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| title | Object<Title> | true | An object containing title attributes for the card’s title. |
| image | Object<Image> or true | false | An object containing path attributes for the card’s image. If value is true will show placeholder with root as placeholderURL base path |
| body | Object<Body> | true | An object containing body attributes for the card’s body. |
| variant | string | false | A single value to adjust the component using available variants: “feature” |
| Name | Type | Required | Description |
|---|---|---|---|
| smallSrc | string | true | Path to the non-retina version of the image |
| largeSrc | string | false | Path to the retina version of the image |
| alt | string | false | The HTML alt tag to explain the appearance and function of the image. Not required if the image is only decorative |
| placeholderUrl | string | false | Optional base path for placeholder image |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the card title |
| subtitle | string | false | The text for the card subtitle |
| headingLevel | int | false | Number used to determine the heading level of the card title. Defaults to 2 |
| classes | string | false | Font size classes for the card title. Defaults to ons-u-fs-m |
| url | string | false | The URL for the title link href attribute |
| id | string | true | The HTML id attribute for the card title |
| Name | Type | Required | Description |
|---|---|---|---|
| figure | string | false | Headline figure for the card element |
| text | string | true | The excerpt text for the card element |
| id | string | true | The HTML id for the card text excerpt. Used for the card’s aria-describedBy attribute |
| itemsList | Array<ListItem> (ref) | false | A list of links for child items of the card |
HTML
<div class="ons-container">
<div class="ons-grid">
<div class="ons-grid__col ons-col-4@m">
<div class="ons-card">
<a href="#0" class="ons-card__link">
<h2 class="ons-card__title ons-u-fs-m" id="card-set-1"> About the census </h2>
</a>
<p id="text1" class="ons-card__body">The census is a survey that gives us information about all the households
in England and Wales.</p>
</div>
</div>
<div class="ons-grid__col ons-col-4@m">
<div class="ons-card">
<a href="#0" class="ons-card__link">
<h2 class="ons-card__title ons-u-fs-m" id="card-set-2"> Working on the census </h2>
</a>
<p id="text2" class="ons-card__body">For Census 2021, we’ll be hiring at least 30,000 field staff across England
and Wales.</p>
</div>
</div>
<div class="ons-grid__col ons-col-4@m">
<div class="ons-card">
<a href="#0" class="ons-card__link">
<h2 class="ons-card__title ons-u-fs-m" id="card-set-3"> Your data and security </h2>
</a>
<p id="text3" class="ons-card__body">How we keep your data safe and what happens to your personal information.
</p>
</div>
</div>
</div>
</div>Card set with list
This is a row of three cards with a list of links that direct the user to the <h2> headings on the linked pages.
You must ensure that all the heading links are unique.
Example Card Set With Lists contents
Nunjucks
{% from "components/card/_macro.njk" import onsCard %}
<div class="ons-container">
<div class="ons-grid">
<div class="ons-grid__col ons-col-4@m">
{{
onsCard({
"title": {
"id": 'card-with-list-1',
"text": 'About the census',
"url": '#0'
},
"body":{
"id": 'text1',
"text": 'The census is a survey that gives us information about all the households in England and Wales.',
"itemsList": [
{
"url": '#0',
"text": 'List item 1 about the census'
},
{
"url": '#0',
"text": 'List item 2 about the census'
}
]
}
})
}}
</div>
<div class="ons-grid__col ons-col-4@m">
{{
onsCard({
"title": {
"id": 'card-with-list-2',
"text": 'Working on the census',
"url": '#0'
},
"body":{
"id": 'text2',
"text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
"itemsList": [
{
"url": '#0',
"text": 'List item 1 about working on the census'
},
{
"url": '#0',
"text": 'List item 2 about working on the census'
}
]
}
})
}}
</div>
<div class="ons-grid__col ons-col-4@m">
{{
onsCard({
"title": {
"id": 'card-with-list-3',
"text": 'Your data and security',
"url": '#0'
},
"body":{
"id": 'text3',
"text": 'How we keep your data safe and what happens to your personal information.',
"itemsList": [
{
"url": '#0',
"text": 'List item 1 about your data and security'
},
{
"url": '#0',
"text": 'List item 2 about your data and security'
}
]
}
})
}}
</div>
</div>
</div>
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| title | Object<Title> | true | An object containing title attributes for the card’s title. |
| image | Object<Image> or true | false | An object containing path attributes for the card’s image. If value is true will show placeholder with root as placeholderURL base path |
| body | Object<Body> | true | An object containing body attributes for the card’s body. |
| variant | string | false | A single value to adjust the component using available variants: “feature” |
| Name | Type | Required | Description |
|---|---|---|---|
| smallSrc | string | true | Path to the non-retina version of the image |
| largeSrc | string | false | Path to the retina version of the image |
| alt | string | false | The HTML alt tag to explain the appearance and function of the image. Not required if the image is only decorative |
| placeholderUrl | string | false | Optional base path for placeholder image |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the card title |
| subtitle | string | false | The text for the card subtitle |
| headingLevel | int | false | Number used to determine the heading level of the card title. Defaults to 2 |
| classes | string | false | Font size classes for the card title. Defaults to ons-u-fs-m |
| url | string | false | The URL for the title link href attribute |
| id | string | true | The HTML id attribute for the card title |
| Name | Type | Required | Description |
|---|---|---|---|
| figure | string | false | Headline figure for the card element |
| text | string | true | The excerpt text for the card element |
| id | string | true | The HTML id for the card text excerpt. Used for the card’s aria-describedBy attribute |
| itemsList | Array<ListItem> (ref) | false | A list of links for child items of the card |
HTML
<div class="ons-container">
<div class="ons-grid">
<div class="ons-grid__col ons-col-4@m">
<div class="ons-card">
<a href="#0" class="ons-card__link">
<h2 class="ons-card__title ons-u-fs-m" id="card-with-list-1"> About the census </h2>
</a>
<p id="text1" class="ons-card__body">The census is a survey that gives us information about all the households
in England and Wales.</p>
<ul class="ons-list ons-list--dashed">
<li class="ons-list__item">
<a href="#0" class="ons-list__link">List item 1 about the census</a>
</li>
<li class="ons-list__item">
<a href="#0" class="ons-list__link">List item 2 about the census</a>
</li>
</ul>
</div>
</div>
<div class="ons-grid__col ons-col-4@m">
<div class="ons-card">
<a href="#0" class="ons-card__link">
<h2 class="ons-card__title ons-u-fs-m" id="card-with-list-2"> Working on the census </h2>
</a>
<p id="text2" class="ons-card__body">For Census 2021, we’ll be hiring at least 30,000 field staff across England
and Wales.</p>
<ul class="ons-list ons-list--dashed">
<li class="ons-list__item">
<a href="#0" class="ons-list__link">List item 1 about working on the census</a>
</li>
<li class="ons-list__item">
<a href="#0" class="ons-list__link">List item 2 about working on the census</a>
</li>
</ul>
</div>
</div>
<div class="ons-grid__col ons-col-4@m">
<div class="ons-card">
<a href="#0" class="ons-card__link">
<h2 class="ons-card__title ons-u-fs-m" id="card-with-list-3"> Your data and security </h2>
</a>
<p id="text3" class="ons-card__body">How we keep your data safe and what happens to your personal information.
</p>
<ul class="ons-list ons-list--dashed">
<li class="ons-list__item">
<a href="#0" class="ons-list__link">List item 1 about your data and security</a>
</li>
<li class="ons-list__item">
<a href="#0" class="ons-list__link">List item 2 about your data and security</a>
</li>
</ul>
</div>
</div>
</div>
</div>Cards with images
This is a row of three cards with images.
Example Card Set With Images contents
Nunjucks
{% from "components/card/_macro.njk" import onsCard %}
<div class="ons-container">
<div class="ons-grid">
<div class="ons-grid__col ons-col-4@m">
{{
onsCard({
"image": true,
"title": {
"id": 'card-with-image-1',
"text": 'About the census',
"url": '#0'
},
"body":{
"text": 'The census is a survey that gives us information about all the households in England and Wales.',
"id": 'text1'
}
})
}}
</div>
<div class="ons-grid__col ons-col-4@m">
{{
onsCard({
"image": true,
"title": {
"id": 'card-with-image-2',
"text": 'Working on the census',
"url": '#0'
},
"body":{
"id": 'text2',
"text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.'
}
})
}}
</div>
<div class="ons-grid__col ons-col-4@m">
{{
onsCard({
"image": true,
"title": {
"id": 'card-with-image-3',
"text": 'Your data and security',
"url": '#0'
},
"body":{
"id": 'text3',
"text": 'How we keep your data safe and what happens to your personal information.'
}
})
}}
</div>
</div>
</div>
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| title | Object<Title> | true | An object containing title attributes for the card’s title. |
| image | Object<Image> or true | false | An object containing path attributes for the card’s image. If value is true will show placeholder with root as placeholderURL base path |
| body | Object<Body> | true | An object containing body attributes for the card’s body. |
| variant | string | false | A single value to adjust the component using available variants: “feature” |
| Name | Type | Required | Description |
|---|---|---|---|
| smallSrc | string | true | Path to the non-retina version of the image |
| largeSrc | string | false | Path to the retina version of the image |
| alt | string | false | The HTML alt tag to explain the appearance and function of the image. Not required if the image is only decorative |
| placeholderUrl | string | false | Optional base path for placeholder image |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the card title |
| subtitle | string | false | The text for the card subtitle |
| headingLevel | int | false | Number used to determine the heading level of the card title. Defaults to 2 |
| classes | string | false | Font size classes for the card title. Defaults to ons-u-fs-m |
| url | string | false | The URL for the title link href attribute |
| id | string | true | The HTML id attribute for the card title |
| Name | Type | Required | Description |
|---|---|---|---|
| figure | string | false | Headline figure for the card element |
| text | string | true | The excerpt text for the card element |
| id | string | true | The HTML id for the card text excerpt. Used for the card’s aria-describedBy attribute |
| itemsList | Array<ListItem> (ref) | false | A list of links for child items of the card |
HTML
<div class="ons-container">
<div class="ons-grid">
<div class="ons-grid__col ons-col-4@m">
<div class="ons-card">
<a href="#0" class="ons-card__link">
<img class="ons-card__image ons-u-mb-s " height="100" width="303"
srcset="/img/small/placeholder-card.png 1x, /img/large/placeholder-card.png 2x"
src="/img/small/placeholder-card.png" alt="" loading="lazy" />
<h2 class="ons-card__title ons-u-fs-m" id="card-with-image-1"> About the census </h2>
</a>
<p id="text1" class="ons-card__body">The census is a survey that gives us information about all the households
in England and Wales.</p>
</div>
</div>
<div class="ons-grid__col ons-col-4@m">
<div class="ons-card">
<a href="#0" class="ons-card__link">
<img class="ons-card__image ons-u-mb-s " height="100" width="303"
srcset="/img/small/placeholder-card.png 1x, /img/large/placeholder-card.png 2x"
src="/img/small/placeholder-card.png" alt="" loading="lazy" />
<h2 class="ons-card__title ons-u-fs-m" id="card-with-image-2"> Working on the census </h2>
</a>
<p id="text2" class="ons-card__body">For Census 2021, we’ll be hiring at least 30,000 field staff across England
and Wales.</p>
</div>
</div>
<div class="ons-grid__col ons-col-4@m">
<div class="ons-card">
<a href="#0" class="ons-card__link">
<img class="ons-card__image ons-u-mb-s " height="100" width="303"
srcset="/img/small/placeholder-card.png 1x, /img/large/placeholder-card.png 2x"
src="/img/small/placeholder-card.png" alt="" loading="lazy" />
<h2 class="ons-card__title ons-u-fs-m" id="card-with-image-3"> Your data and security </h2>
</a>
<p id="text3" class="ons-card__body">How we keep your data safe and what happens to your personal information.
</p>
</div>
</div>
</div>
</div>Card set with Headline figures
This card component contains text, links and supporting number. It can be used to showcase statistics.
For more guidance on how to write for these cards please see headline facts and figures section of the content style guide
Example Card Set With Headline Figures contents
Nunjucks
{% from "components/card/_macro.njk" import onsCard %}
<div class="ons-container">
<div class="ons-grid ons-grid-flex-gap ons-grid-flex-gap--s ons-grid-flex--vertical-top">
<div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
{{
onsCard({
"variant": 'feature',
"title": {
"id": 'card-set-1',
"text": 'Deaths registered annually',
"subtitle": 'England and Wales'
},
"body":{
"id": 'text1',
"figure": '581,363',
"text": 'In 2023, up 0.7% from 2022'
}
})
}}
</div>
<div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
{{
onsCard({
"variant": 'feature',
"title": {
"id": 'card-set-2',
"text": 'Alcohol-specific deaths',
"subtitle": 'UK'
},
"body":{
"id": 'text2',
"figure": '10,473',
"text": 'In 2023, the highest number on record'
}
})
}}
</div>
<div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
{{
onsCard({
"variant": 'feature',
"title": {
"id": 'card-set-3',
"text": 'Suicides registered',
"subtitle": 'England and Wales'
},
"body":{
"id": 'text3',
"figure": '6069',
"text": 'In 2023, up 7.6% from 2022'
}
})
}}
</div>
</div>
</div>
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| title | Object<Title> | true | An object containing title attributes for the card’s title. |
| image | Object<Image> or true | false | An object containing path attributes for the card’s image. If value is true will show placeholder with root as placeholderURL base path |
| body | Object<Body> | true | An object containing body attributes for the card’s body. |
| variant | string | false | A single value to adjust the component using available variants: “feature” |
| Name | Type | Required | Description |
|---|---|---|---|
| smallSrc | string | true | Path to the non-retina version of the image |
| largeSrc | string | false | Path to the retina version of the image |
| alt | string | false | The HTML alt tag to explain the appearance and function of the image. Not required if the image is only decorative |
| placeholderUrl | string | false | Optional base path for placeholder image |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text for the card title |
| subtitle | string | false | The text for the card subtitle |
| headingLevel | int | false | Number used to determine the heading level of the card title. Defaults to 2 |
| classes | string | false | Font size classes for the card title. Defaults to ons-u-fs-m |
| url | string | false | The URL for the title link href attribute |
| id | string | true | The HTML id attribute for the card title |
| Name | Type | Required | Description |
|---|---|---|---|
| figure | string | false | Headline figure for the card element |
| text | string | true | The excerpt text for the card element |
| id | string | true | The HTML id for the card text excerpt. Used for the card’s aria-describedBy attribute |
| itemsList | Array<ListItem> (ref) | false | A list of links for child items of the card |
HTML
<div class="ons-container">
<div class="ons-grid ons-grid-flex-gap ons-grid-flex-gap--s ons-grid-flex--vertical-top">
<div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
<div class="ons-card ons-card--feature ons-u-flex-grow">
<h2 class="ons-card__title ons-u-fs-m" id="card-set-1"> Deaths registered annually </h2>
<p class="ons-card__subtitle ons-u-fs-s">England and Wales</p>
<p class="ons-card__figure ons-u-fs-3xl ons-u-fw-b ons-u-mb-no">581,363</p>
<p id="text1" class="ons-card__body">In 2023, up 0.7% from 2022</p>
</div>
</div>
<div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
<div class="ons-card ons-card--feature ons-u-flex-grow">
<h2 class="ons-card__title ons-u-fs-m" id="card-set-2"> Alcohol-specific deaths </h2>
<p class="ons-card__subtitle ons-u-fs-s">UK</p>
<p class="ons-card__figure ons-u-fs-3xl ons-u-fw-b ons-u-mb-no">10,473</p>
<p id="text2" class="ons-card__body">In 2023, the highest number on record</p>
</div>
</div>
<div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
<div class="ons-card ons-card--feature ons-u-flex-grow">
<h2 class="ons-card__title ons-u-fs-m" id="card-set-3"> Suicides registered </h2>
<p class="ons-card__subtitle ons-u-fs-s">England and Wales</p>
<p class="ons-card__figure ons-u-fs-3xl ons-u-fw-b ons-u-mb-no">6069</p>
<p id="text3" class="ons-card__body">In 2023, up 7.6% from 2022</p>
</div>
</div>
</div>
</div>Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss the ‘Card’ component on GitHub (opens in a new tab)