name: Cards (experimental)
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 as a grid. 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.
You can display the grid in three or two columns on desktop. Browsers that don't support CSS grid always display one column.
You must set a `href` for all the links.
This component is currently experimental. If you are using it, please feed back any research findings to the GOV.UK Explore team.
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
examples:
default:
data:
heading: Topics
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
- link:
text: Crime, justice and the law
path: http://www.gov.uk
description: Legal processes, courts and the police
- link:
text: Disabled people
path: http://www.gov.uk
description: Includes carers, your rights, benefits and the Equality Act
- link:
text: Driving and transport
path: http://www.gov.uk
description: Includes vehicle tax, MOT and driving licences
- link:
text: Education and learning
path: http://www.gov.uk
description: Includes student loans, admissions and apprenticeships
- link:
text: Employing people
path: http://www.gov.uk
description: Includes pay, contracts, hiring and redundancies
- link:
text: Environment and countryside
path: http://www.gov.uk
description: Includes flooding, recycling and wildlife
- link:
text: Housing and local services
path: http://www.gov.uk
description: Owning or renting and council services
two_column_layout:
description: Override default three column layout on desktop by passing through `two_column_layout` parameter (defaults to `false`).
data:
two_column_layout: true
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
- link:
text: Crime, justice and the law
path: http://www.gov.uk
description: Legal processes, courts and the police
- link:
text: Disabled people
path: http://www.gov.uk
description: Includes carers, your rights, benefits and the Equality Act
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: Topics
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 [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
data:
items:
- link:
text: Benefits
path: http://www.gov.uk
data_attributes:
track_category: homepageClicked
track_action: track-action
track_label: track-label
track_dimension: track-dimension
track_dimension_index: 29
track_value: 9
description: Includes eligibility, appeals, tax credits and Universal Credit
- link:
text: Births, deaths, marriages and care
path: http://www.gov.uk
data_attributes:
track_category: homepageClicked
track_action: track-action
track_label: track-label
track_dimension: track-dimension
track_dimension_index: 29
track_value: 9
description: Parenting, civil partnerships, divorce and Lasting Power of Attorney