Card Group
Contents
<div class="dpr-card-group dpr-card-group-v1" data-dpr-module="card-group">
<div class="dpr-card-group__item card card--clickable" data-click-navigate-to="#one">
<div class="card-wrapper">
<div class="dpr-loading-panel">
<div class="dpr-loading-anim">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<h2 class="govuk-heading-m card__heading">
<a class="govuk-link card__link govuk-link--no-visited-state" href="#one">
First card
</a>
</h2>
<p class="govuk-body card__description">
The first card in the card group.
</p>
</div>
</div>
<div class="dpr-card-group__item card card--clickable" data-click-navigate-to="#two">
<div class="card-wrapper">
<div class="dpr-loading-panel">
<div class="dpr-loading-anim">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<h2 class="govuk-heading-m card__heading">
<a class="govuk-link card__link govuk-link--no-visited-state" href="#two">
Second card
</a>
</h2>
<p class="govuk-body card__description">
The second card in the card group.
</p>
</div>
</div>
<div class="dpr-card-group__item card card--clickable" data-click-navigate-to="#three">
<div class="card-wrapper">
<div class="dpr-loading-panel">
<div class="dpr-loading-anim">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<h2 class="govuk-heading-m card__heading">
<a class="govuk-link card__link govuk-link--no-visited-state" href="#three">
Third card
</a>
</h2>
<p class="govuk-body card__description">
The third card in the card group.
</p>
</div>
</div>
</div>
Nunjucks macro options
| Name |
Type |
Required |
Description |
| items |
array |
Yes |
An array of cards. See Cards. |
| variant |
Number |
No |
Card Variant ID. Defaults to style 1 |
Cards
| Name |
Type |
Required |
Description |
| text |
String |
Yes |
The text to be displayed in the title link of the card. |
| href |
String |
Yes |
The URL that the card should link to. |
| description |
String |
Yes |
The explanatory text to be displayed underneath the card title link. |
{%- from "dpr/components/card-group/view.njk" import dprCardGroup -%}
{{ dprCardGroup([
{
text: 'First card',
href: '#one',
description: 'The first card in the card group.'
},
{
text: 'Second card',
href: '#two',
description: 'The second card in the card group.'
},
{
text: 'Third card',
href: '#three',
description: 'The third card in the card group.'
}
]) }}
Overview
When to use
Use this component when users need to navigate to a small number of child pages. Such specific project-level applications within a larger program, or when choosing areas specific to user type (e.g. Customer or Seller).
When not to use
Do not use this component when users need to navigate to a large number of child pages, as it may be an inefficient use of screen space.
Additionally, if users will need to navigate horizontally between child pages, look at alternatives such as the MoJ side navigation.
How to use
Default
Contents
<div class="dpr-card-group dpr-card-group-v1" data-dpr-module="card-group">
<div class="dpr-card-group__item card card--clickable" data-click-navigate-to="#one">
<div class="card-wrapper">
<div class="dpr-loading-panel">
<div class="dpr-loading-anim">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<h2 class="govuk-heading-m card__heading">
<a class="govuk-link card__link govuk-link--no-visited-state" href="#one">
First card
</a>
</h2>
<p class="govuk-body card__description">
The first card in the card group.
</p>
</div>
</div>
<div class="dpr-card-group__item card card--clickable" data-click-navigate-to="#two">
<div class="card-wrapper">
<div class="dpr-loading-panel">
<div class="dpr-loading-anim">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<h2 class="govuk-heading-m card__heading">
<a class="govuk-link card__link govuk-link--no-visited-state" href="#two">
Second card
</a>
</h2>
<p class="govuk-body card__description">
The second card in the card group.
</p>
</div>
</div>
<div class="dpr-card-group__item card card--clickable" data-click-navigate-to="#three">
<div class="card-wrapper">
<div class="dpr-loading-panel">
<div class="dpr-loading-anim">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<h2 class="govuk-heading-m card__heading">
<a class="govuk-link card__link govuk-link--no-visited-state" href="#three">
Third card
</a>
</h2>
<p class="govuk-body card__description">
The third card in the card group.
</p>
</div>
</div>
</div>
Nunjucks macro options
| Name |
Type |
Required |
Description |
| items |
array |
Yes |
An array of cards. See Cards. |
| variant |
Number |
No |
Card Variant ID. Defaults to style 1 |
Cards
| Name |
Type |
Required |
Description |
| text |
String |
Yes |
The text to be displayed in the title link of the card. |
| href |
String |
Yes |
The URL that the card should link to. |
| description |
String |
Yes |
The explanatory text to be displayed underneath the card title link. |
{%- from "dpr/components/card-group/view.njk" import dprCardGroup -%}
{{ dprCardGroup([
{
text: 'First card',
href: '#one',
description: 'The first card in the card group.'
},
{
text: 'Second card',
href: '#two',
description: 'The second card in the card group.'
},
{
text: 'Third card',
href: '#three',
description: 'The third card in the card group.'
}
]) }}
Variant
Contents
<div class="dpr-card-group dpr-card-group-v2" data-dpr-module="card-group">
<div class="dpr-card-group__item" data-click-navigate-to="#one">
<div class="card-wrapper">
<div class="dpr-loading-panel">
<div class="dpr-loading-anim">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible govuk-!-static-margin-top-0">
<div class="dpr-card-group__item-header">
<a class="govuk-link govuk-!-font-weight-bold govuk-link--no-visited-state govuk-body card__link" href="#one">
First card Variant 2
</a>
</div>
<p class="govuk-!-static-margin-top-3 govuk-!-static-margin-bottom-0 card__description">
The first card in the card group.
</p>
</div>
</div>
<div class="dpr-card-group__item" data-click-navigate-to="#two">
<div class="card-wrapper">
<div class="dpr-loading-panel">
<div class="dpr-loading-anim">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible govuk-!-static-margin-top-0">
<div class="dpr-card-group__item-header">
<a class="govuk-link govuk-!-font-weight-bold govuk-link--no-visited-state govuk-body card__link" href="#two">
Second card Variant 2
</a>
</div>
<p class="govuk-!-static-margin-top-3 govuk-!-static-margin-bottom-0 card__description">
The second card in the card group.
</p>
</div>
</div>
<div class="dpr-card-group__item" data-click-navigate-to="#three">
<div class="card-wrapper">
<div class="dpr-loading-panel">
<div class="dpr-loading-anim">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible govuk-!-static-margin-top-0">
<div class="dpr-card-group__item-header">
<a class="govuk-link govuk-!-font-weight-bold govuk-link--no-visited-state govuk-body card__link" href="#three">
Third card Variant 2
</a>
</div>
<p class="govuk-!-static-margin-top-3 govuk-!-static-margin-bottom-0 card__description">
The third card in the card group.
</p>
</div>
</div>
</div>
Nunjucks macro options
| Name |
Type |
Required |
Description |
| items |
array |
Yes |
An array of cards. See Cards. |
| variant |
Number |
No |
Card Variant ID. Defaults to style 1 |
Cards
| Name |
Type |
Required |
Description |
| text |
String |
Yes |
The text to be displayed in the title link of the card. |
| href |
String |
Yes |
The URL that the card should link to. |
| description |
String |
Yes |
The explanatory text to be displayed underneath the card title link. |
{%- from "dpr/components/card-group/view.njk" import dprCardGroup -%}
{{ dprCardGroup([
{
text: 'First card Variant 2',
href: '#one',
description: 'The first card in the card group.'
},
{
text: 'Second card Variant 2',
href: '#two',
description: 'The second card in the card group.'
},
{
text: 'Third card Variant 2',
href: '#three',
description: 'The third card in the card group.'
}
], 2) }}