Chevron card
When to use this component
Use the chevron card component to display a list of linked items with titles, descriptions and a visual chevron indicator.
Use chevron cards when you need to:
- present a list of navigational links with supporting descriptions
- guide users to different sections or topics within your service
- create a clear visual hierarchy for grouped content
When not to use this component
Do not use chevron cards:
- for actions that don't navigate to another page (use buttons instead)
- when you have only one or two links (use standard links instead)
- for content that doesn't benefit from descriptions (use a simple list of links)
How it works
The chevron card component creates a clickable area that includes:
- a linked title that users can click
- an optional description providing context about the destination
- a chevron arrow on the right indicating forward navigation
- a hidden overlay link that makes the entire card clickable
Cards are separated by borders and the first card has no top border to create a clean appearance at the top of lists.
HTML examples
Select the appropriate example from this page and directly integrate the HTML into your web template. You can customise these examples to align with your specific requirements. Refer to the layouts section for further guidance on structuring your web template.
Basic chevron cards
An example of chevron cards with titles and descriptions.
Basic chevron cards
-
Getting started
Learn how to set up your environment and begin building your service.
-
Components
Explore reusable interface elements designed to support your build.
-
Patterns
Discover solutions to common design and development challenges.
<ul class="dfe-chevron-card__list">
<li class="dfe-chevron-card">
<div class="dfe-chevron-card__wrapper">
<h3 class="govuk-heading-s govuk-!-margin-bottom-2">
<a class="govuk-link govuk-link--no-visited-state" href="#">
Getting started
</a>
</h3>
<p class="dfe-chevron-card__description govuk-body">
Learn how to set up your environment and begin building your service.
</p>
<a class="dfe-chevron-card__link" href="#" aria-hidden="true" tabindex="-1">
<span class="govuk-visually-hidden">Getting started</span>
</a>
</div>
</li>
<li class="dfe-chevron-card">
<div class="dfe-chevron-card__wrapper">
<h3 class="govuk-heading-s govuk-!-margin-bottom-2">
<a class="govuk-link govuk-link--no-visited-state" href="#">
Components
</a>
</h3>
<p class="dfe-chevron-card__description govuk-body">
Explore reusable interface elements designed to support your build.
</p>
<a class="dfe-chevron-card__link" href="#" aria-hidden="true" tabindex="-1">
<span class="govuk-visually-hidden">Components</span>
</a>
</div>
</li>
<li class="dfe-chevron-card">
<div class="dfe-chevron-card__wrapper">
<h3 class="govuk-heading-s govuk-!-margin-bottom-2">
<a class="govuk-link govuk-link--no-visited-state" href="#">
Patterns
</a>
</h3>
<p class="dfe-chevron-card__description govuk-body">
Discover solutions to common design and development challenges.
</p>
<a class="dfe-chevron-card__link" href="#" aria-hidden="true" tabindex="-1">
<span class="govuk-visually-hidden">Patterns</span>
</a>
</div>
</li>
</ul>
Warning
This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.
{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block title %}{% endblock %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<ul class="dfe-chevron-card__list">
<li class="dfe-chevron-card">
<div class="dfe-chevron-card__wrapper">
<h3 class="govuk-heading-s govuk-!-margin-bottom-2">
<a class="govuk-link govuk-link--no-visited-state" href="#">
Getting started
</a>
</h3>
<p class="dfe-chevron-card__description govuk-body">
Learn how to set up your environment and begin building your service.
</p>
<a class="dfe-chevron-card__link" href="#" aria-hidden="true" tabindex="-1">
<span class="govuk-visually-hidden">Getting started</span>
</a>
</div>
</li>
<li class="dfe-chevron-card">
<div class="dfe-chevron-card__wrapper">
<h3 class="govuk-heading-s govuk-!-margin-bottom-2">
<a class="govuk-link govuk-link--no-visited-state" href="#">
Components
</a>
</h3>
<p class="dfe-chevron-card__description govuk-body">
Explore reusable interface elements designed to support your build.
</p>
<a class="dfe-chevron-card__link" href="#" aria-hidden="true" tabindex="-1">
<span class="govuk-visually-hidden">Components</span>
</a>
</div>
</li>
<li class="dfe-chevron-card">
<div class="dfe-chevron-card__wrapper">
<h3 class="govuk-heading-s govuk-!-margin-bottom-2">
<a class="govuk-link govuk-link--no-visited-state" href="#">
Patterns
</a>
</h3>
<p class="dfe-chevron-card__description govuk-body">
Discover solutions to common design and development challenges.
</p>
<a class="dfe-chevron-card__link" href="#" aria-hidden="true" tabindex="-1">
<span class="govuk-visually-hidden">Patterns</span>
</a>
</div>
</li>
</ul>
{% endblock %}Chevron cards without description
An example of chevron cards with titles only, without descriptions.
Chevron cards without description
<ul class="dfe-chevron-card__list">
<li class="dfe-chevron-card">
<div class="dfe-chevron-card__wrapper">
<h3 class="govuk-heading-s govuk-!-margin-bottom-0">
<a class="govuk-link govuk-link--no-visited-state" href="#">
Overview
</a>
</h3>
<a class="dfe-chevron-card__link" href="#" aria-hidden="true" tabindex="-1">
<span class="govuk-visually-hidden">Overview</span>
</a>
</div>
</li>
<li class="dfe-chevron-card">
<div class="dfe-chevron-card__wrapper">
<h3 class="govuk-heading-s govuk-!-margin-bottom-0">
<a class="govuk-link govuk-link--no-visited-state" href="#">
Eligibility
</a>
</h3>
<a class="dfe-chevron-card__link" href="#" aria-hidden="true" tabindex="-1">
<span class="govuk-visually-hidden">Eligibility</span>
</a>
</div>
</li>
<li class="dfe-chevron-card">
<div class="dfe-chevron-card__wrapper">
<h3 class="govuk-heading-s govuk-!-margin-bottom-0">
<a class="govuk-link govuk-link--no-visited-state" href="#">
How to apply
</a>
</h3>
<a class="dfe-chevron-card__link" href="#" aria-hidden="true" tabindex="-1">
<span class="govuk-visually-hidden">How to apply</span>
</a>
</div>
</li>
<li class="dfe-chevron-card">
<div class="dfe-chevron-card__wrapper">
<h3 class="govuk-heading-s govuk-!-margin-bottom-0">
<a class="govuk-link govuk-link--no-visited-state" href="#">
Contact us
</a>
</h3>
<a class="dfe-chevron-card__link" href="#" aria-hidden="true" tabindex="-1">
<span class="govuk-visually-hidden">Contact us</span>
</a>
</div>
</li>
</ul>
Warning
This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.
{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block title %}{% endblock %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<ul class="dfe-chevron-card__list">
<li class="dfe-chevron-card">
<div class="dfe-chevron-card__wrapper">
<h3 class="govuk-heading-s govuk-!-margin-bottom-0">
<a class="govuk-link govuk-link--no-visited-state" href="#">
Overview
</a>
</h3>
<a class="dfe-chevron-card__link" href="#" aria-hidden="true" tabindex="-1">
<span class="govuk-visually-hidden">Overview</span>
</a>
</div>
</li>
<li class="dfe-chevron-card">
<div class="dfe-chevron-card__wrapper">
<h3 class="govuk-heading-s govuk-!-margin-bottom-0">
<a class="govuk-link govuk-link--no-visited-state" href="#">
Eligibility
</a>
</h3>
<a class="dfe-chevron-card__link" href="#" aria-hidden="true" tabindex="-1">
<span class="govuk-visually-hidden">Eligibility</span>
</a>
</div>
</li>
<li class="dfe-chevron-card">
<div class="dfe-chevron-card__wrapper">
<h3 class="govuk-heading-s govuk-!-margin-bottom-0">
<a class="govuk-link govuk-link--no-visited-state" href="#">
How to apply
</a>
</h3>
<a class="dfe-chevron-card__link" href="#" aria-hidden="true" tabindex="-1">
<span class="govuk-visually-hidden">How to apply</span>
</a>
</div>
</li>
<li class="dfe-chevron-card">
<div class="dfe-chevron-card__wrapper">
<h3 class="govuk-heading-s govuk-!-margin-bottom-0">
<a class="govuk-link govuk-link--no-visited-state" href="#">
Contact us
</a>
</h3>
<a class="dfe-chevron-card__link" href="#" aria-hidden="true" tabindex="-1">
<span class="govuk-visually-hidden">Contact us</span>
</a>
</div>
</li>
</ul>
{% endblock %}If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.