Guidance
You should follow the installation instructions before using this component.
The card component is a versatile user interface element used to display grouped information in a visually appealing and organised way.
They can enhance user interaction and content presentation across various applications and devices.
Test as plain content first
Cards can make things harder to understand if overused or used incorrectly. Before using them, test your content as structured content with headers and paragraphs and grid layout.
Basic cards
An example of a basic card component used in a group.
Contents
Card title
A short description for the card.
Card title
A short description for the card.
<div class="dfe-grid-container">
<div class="dfe-card">
<div class="dfe-card-container">
<h3 class="govuk-heading-m">
<a href="#" class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Card title</a>
</h3>
<p>A short description for the card.</p>
</div>
</div>
<div class="dfe-card">
<div class="dfe-card-container">
<h3 class="govuk-heading-m">
<a href="#" class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Card title</a>
</h3>
<p>A short description for the card.</p>
</div>
</div>
</div>{% from 'node_modules/dfe-frontend/packages/components/card/macro.njk' import card %}
{{ card({
cards: [
{
"imageCard": false,
"imagePath": "/images/sample-image.jpg",
"altText": "Sample Image",
"headingLevel": "3",
"linkCard": true,
"link": "#",
"openInNewTab": false,
"heading": "Sample Card Title",
"description": "A short description for the card.",
"meta": ""
},
{
"imageCard": false,
"imagePath": "/images/sample-image.jpg",
"altText": "Sample Image",
"headingLevel": "3",
"linkCard": true,
"link": "#",
"openInNewTab": false,
"heading": "Sample Card Title",
"description": "A short description for the card.",
"meta": ""
}
]
}) }}Basic with meta information
An example of a basic card component used in a group which has meta data.
Contents
<div class="dfe-grid-container">
<div class="dfe-card">
<div class="dfe-card-container">
<h3 class="govuk-heading-m">
<a href="#" class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Card title</a>
</h3>
<p>A short description for the card.</p>
<p class="govuk-body-s">Meta information.</p>
</div>
</div>
<div class="dfe-card">
<div class="dfe-card-container">
<h3 class="govuk-heading-m">
<a href="#" class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Card title</a>
</h3>
<p>A short description for the card.</p>
<p class="govuk-body-s">Meta information.</p>
</div>
</div>
</div>{% from 'node_modules/dfe-frontend/packages/components/card/macro.njk' import card %}
{{ card({
cards: [
{
"imageCard": false,
"imagePath": "/images/sample-image.jpg",
"altText": "Sample Image",
"headingLevel": "3",
"linkCard": true,
"link": "#",
"openInNewTab": false,
"heading": "Sample Card Title",
"description": "A short description for the card.",
"meta": "Meta information"
},
{
"imageCard": false,
"imagePath": "/images/sample-image.jpg",
"altText": "Sample Image",
"headingLevel": "3",
"linkCard": true,
"link": "#",
"openInNewTab": false,
"heading": "Sample Card Title",
"description": "A short description for the card.",
"meta": "Meta information"
}
]
}) }}Cards with image
An example of a card component used in a group which has meta data and an image.
Contents
<div class="dfe-grid-container">
<div class="dfe-card">
<img src="/assets/images/assessment-blog.png" alt="Sample Image">
<div class="dfe-card-container">
<h3 class="govuk-heading-m">
<a href="#" class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Sample Card Title</a>
</h3>
<p>A short description for the card.</p>
<p class="govuk-body-s">Meta information</p>
</div>
</div>
<div class="dfe-card">
<img src="/assets/images/assessment-blog.png" alt="Sample Image">
<div class="dfe-card-container">
<h3 class="govuk-heading-m">
<a href="#" class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Sample Card Title</a>
</h3>
<p>A short description for the card.</p>
<p class="govuk-body-s">Meta information</p>
</div>
</div>
</div>{% from 'node_modules/dfe-frontend/packages/components/card/macro.njk' import card %}
{{ card({
cards: [
{
"imageCard": true,
"imagePath": "/assets/images/assessment-blog.png",
"altText": "Sample Image",
"headingLevel": "3",
"linkCard": true,
"link": "#",
"openInNewTab": false,
"heading": "Sample Card Title",
"description": "A short description for the card.",
"meta": "Meta information"
},
{
"imageCard": true,
"imagePath": "/assets/images/assessment-blog.png",
"altText": "Sample Image",
"headingLevel": "3",
"linkCard": true,
"link": "#",
"openInNewTab": false,
"heading": "Sample Card Title",
"description": "A short description for the card.",
"meta": "Meta information"
}
]
}) }}Properties
Details of the properties that you can configure when using the nunjucks version of this component.
| Parameter Name | Type | Description |
|---|---|---|
| imageCard | Boolean | Sets the image section ready for an image |
| imagePath | string | Path to your image file |
| altText | string | Alternative description of the image. |
| headingLevel | number | Should be a number between 2 and 4 indicating the heading level of the hard title |
| linkCard | Boolean | Sets whether the card header is a link and therefore the whole card clickable. |
| link | String | URL to link to. |
| openInNewTab | Boolean | Set to true if the link should open in a new tab. Default is false |
| heading | Object | The text for the card header. |
| description | String | The body text of the card under the header. |
| meta | string | If true, sets up a small body tag for containing meta text which is smaller than the card body and pushed to the bottom of the card. |
Services using this component
The following services are using this component:
Help us improve this component
To improve this component based on user needs and research, you can contribute on the Card - Component #13 project issue.