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