name: Cards
description: A grid of cards that have a link and a description
body: |
The component renders the cards as an unordered list element and visually presents it using CSS grid to display the cards in either a one (default), two or three column layout. It doesn't use the [GOV.UK Design System grid](https://design-system.service.gov.uk/styles/layout/#grid-system) but sets its own so that it can separately target desktop, tablet and mobile columns.
Browsers that don't support CSS grid always display one column.
You must set a `href` for all the links.
accessibility_criteria: |
The component must:
- use the correct heading level hierarchy eg. if the component heading uses a `
`, the subheadings must use a ``
It is also good practise to include a heading above the list to tell users what the list contains
shared_accessibility_criteria:
- link
uses_component_wrapper_helper: true
examples:
default:
data:
heading: Services and information
items:
- link:
text: Benefits
path: http://www.gov.uk
description: Includes eligibility, appeals, tax credits and Universal Credit
- link:
text: Births, deaths, marriages and care
path: http://www.gov.uk
description: Parenting, civil partnerships, divorce and Lasting Power of Attorney
- link:
text: Business and self-employed
path: http://www.gov.uk
description: Tools and guidance for businesses
- link:
text: Childcare and parenting
path: http://www.gov.uk
description: Includes giving birth, fostering, adopting, benefits for children, childcare and schools
- link:
text: Citizenship and living in the UK
path: http://www.gov.uk
description: Voting, community participation, life in the UK, international projects
one_column_layout_without_heading:
description: No border at the top of the list of cards is present when using a one column layout without a heading. The first card item will still include a top border when using a 2 or 3 column layout as shown in the examples below.
data:
items:
- link:
text: Benefits
path: http://www.gov.uk
description: Includes eligibility, appeals, tax credits and Universal Credit
- link:
text: Births, deaths, marriages and care
path: http://www.gov.uk
description: Parenting, civil partnerships, divorce and Lasting Power of Attorney
- link:
text: Business and self-employed
path: http://www.gov.uk
description: Tools and guidance for businesses
- link:
text: Childcare and parenting
path: http://www.gov.uk
description: Includes giving birth, fostering, adopting, benefits for children, childcare and schools
- link:
text: Citizenship and living in the UK
path: http://www.gov.uk
description: Voting, community participation, life in the UK, international projects
two_column_layout:
description: Override default single column layout on desktop by setting the `columns` parameter to `2`.
data:
columns: 2
items:
- link:
text: Benefits
path: http://www.gov.uk
description: Includes eligibility, appeals, tax credits and Universal Credit
- link:
text: Births, deaths, marriages and care
path: http://www.gov.uk
description: Parenting, civil partnerships, divorce and Lasting Power of Attorney
- link:
text: Business and self-employed
path: http://www.gov.uk
description: Tools and guidance for businesses
- link:
text: Childcare and parenting
path: http://www.gov.uk
description: Includes giving birth, fostering, adopting, benefits for children, childcare and schools
- link:
text: Citizenship and living in the UK
path: http://www.gov.uk
description: Voting, community participation, life in the UK, international projects
three_column_layout:
description: Override default single column layout on desktop by setting the `columns` parameter to `3`.
data:
columns: 3
items:
- link:
text: Benefits
path: http://www.gov.uk
description: Includes eligibility, appeals, tax credits and Universal Credit
- link:
text: Births, deaths, marriages and care
path: http://www.gov.uk
description: Parenting, civil partnerships, divorce and Lasting Power of Attorney
- link:
text: Business and self-employed
path: http://www.gov.uk
description: Tools and guidance for businesses
- link:
text: Childcare and parenting
path: http://www.gov.uk
description: Includes giving birth, fostering, adopting, benefits for children, childcare and schools
- link:
text: Citizenship and living in the UK
path: http://www.gov.uk
description: Voting, community participation, life in the UK, international projects
custom_heading_levels:
description: |
Override default heading level by passing through `heading_level` parameter (defaults to ``).
Override default subheading level by passing through `sub_heading_level` parameter (defaults to ``)
data:
heading: Services and information
heading_level: 3
sub_heading_level: 4
items:
- link:
text: Benefits
path: http://www.gov.uk
description: Includes eligibility, appeals, tax credits and Universal Credit
with_data_attributes:
description: |
Data attributes can be passed to individual links within the component as shown.
Note that the component does not include built in tracking. If this is required consider using the [GA4 link tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/trackers/ga4-link-tracker.md).
data:
items:
- link:
text: Benefits
path: http://www.gov.uk
data_attributes:
an_attribute: some_value
description: Includes eligibility, appeals, tax credits and Universal Credit
- link:
text: Births, deaths, marriages and care
path: http://www.gov.uk
data_attributes:
an_attribute: some_value
description: Parenting, civil partnerships, divorce and Lasting Power of Attorney