Card navigation
Card navigation displays links and summary text in boxes with an optional image.
Sample HTML for Card navigation example
<nav aria-label="Category navigation">
<ul class="ds_category-list ds_category-list--grid ds_category-list--narrow">
<li class="ds_card ds_card--has-hover">
<article class="ds_category-item ds_category-item--card">
<h2 class="ds_category-item__title">
<a href="#" class="ds_category-item__link">
Environment and countryside
</a>
</h2>
<p class="ds_category-item__summary">
Access to and protection of the countryside and managing wildlife on your land
</p>
</article>
</li>
<li class="ds_card ds_card--has-hover">
<article class="ds_category-item ds_category-item--card">
<h2 class="ds_category-item__title">
<a href="#" class="ds_category-item__link">Environmental Impact Assessment (EIA)</a>
</h2>
<p class="ds_category-item__summary">
Find out about Environmental Impact Assessments (EIAs) in your area
</p>
</article>
</li>
<li class="ds_card ds_card--has-hover">
<article class="ds_category-item ds_category-item--card">
<h2 class="ds_category-item__title">
<a href="#" class="ds_category-item__link">Farming and rural issues</a>
</h2>
<p class="ds_category-item__summary">
Guidance for farming, animal health, agriculture and food businesses in Scotland
</p>
</article>
</li>
<li class="ds_card ds_card--has-hover">
<article class="ds_category-item ds_category-item--card">
<h2 class="ds_category-item__title">
<a href="#" class="ds_category-item__link">Waste and energy</a>
</h2>
<p class="ds_category-item__summary">
Find advice and support to help your business become more environmentally aware and efficient
</p>
</article>
</li>
<li class="ds_card ds_card--has-hover">
<article class="ds_category-item ds_category-item--card">
<h2 class="ds_category-item__title">
<a href="#" class="ds_category-item__link">Marine and fisheries</a>
</h2>
<p class="ds_category-item__summary">
Includes information on safety at sea and managing crew
</p>
</article>
</li>
</ul>
</nav>About card navigation
Card navigation displays hyperlinked headings and summary text in rows of large boxes.
There are 3 cards per row on desktop and 2 cards per row on tablet.
On mobile, the cards display in a single column.
Card navigation spaces out items which makes it easy for users to browse content.
Consider using card navigation if users are likely to be browsing content rather than looking for something specific.
How to use card navigation
Use a different colour for the cards and the background. For example, use white cards on a grey background.
Image card navigation
Image card navigation is a type of card navigation.
It displays in the same way as card navigation. But each card contains an image or a logo.
Image card navigation provides a visually engaging page. This can be useful for sites such as campaign sites.
Think carefully before using this type of navigation. Image cards take up more space than other navigational page types. This makes it more difficult for users to scan the page and find the information they need.
Using images can also:
- harm the usability and accessibility of your service
- make pages slower to load
- reduce the sustainability of your service
- make a service look dated very quickly
Read the images guidance for information on choosing and optimising images.
How to use image card navigation
Use the same aspect ratio for each image. We recommend an aspect ratio of 16:9.
The images in card navigation are decorative. Give them a blank alt attribute to tell screen readers to ignore them.
Sample HTML for Image card navigation example
<nav aria-label="Category navigation">
<ul class="ds_category-list ds_category-list--grid ds_category-list--narrow">
<li class="ds_card ds_card--has-hover">
<div class="ds_card__media">
<div class="ds_aspect-box">
<img alt="" aria-hidden="true" class="ds_aspect-box__inner" src="/binaries/content/gallery/designsystem/examples/thistles-jpg" />
</div>
</div>
<article class="ds_category-item ds_card__content">
<h2 class="ds_category-item__title">
<a href="#" class="ds_category-item__link">
Environment
</a>
</h2>
<p class="ds_category-item__summary">
Access to and protection of the countryside and managing wildlife on your land
</p>
</article>
</li>
<li class="ds_card ds_card--has-hover">
<div class="ds_card__media">
<div class="ds_aspect-box">
<img alt="" aria-hidden="true" class="ds_aspect-box__inner" src="/binaries/content/gallery/designsystem/examples/clyde-jpg" />
</div>
</div>
<article class="ds_category-item ds_card__content">
<h2 class="ds_category-item__title">
<a href="#" class="ds_category-item__link">Business and innovation</a>
</h2>
<p class="ds_category-item__summary">
Tools and guidance on getting started, finance, premises and employing people.
</p>
</article>
</li>
<li class="ds_card ds_card--has-hover">
<div class="ds_card__media">
<div class="ds_aspect-box">
<img alt="" aria-hidden="true" class="ds_aspect-box__inner" src="/binaries/content/gallery/designsystem/examples/edcastle-jpg" />
</div>
</div>
<article class="ds_category-item ds_card__content">
<h2 class="ds_category-item__title">
<a href="#" class="ds_category-item__link">Tourism and things to do</a>
</h2>
<p class="ds_category-item__summary">
Accommodation, events, galleries, museums, the countryside and wildlife.
</p>
</article>
</li>
<li class="ds_card ds_card--has-hover">
<div class="ds_card__media">
<div class="ds_aspect-box">
<img alt="" aria-hidden="true" class="ds_aspect-box__inner" src="/binaries/content/gallery/designsystem/examples/coast-jpg" />
</div>
</div>
<article class="ds_category-item ds_card__content">
<h2 class="ds_category-item__title">
<a href="#" class="ds_category-item__link">Climate change</a>
</h2>
<p class="ds_category-item__summary">
Find advice and support to help your business become more environmentally aware and efficient
</p>
</article>
</li>
<li class="ds_card ds_card--has-hover">
<div class="ds_card__media">
<div class="ds_aspect-box">
<img alt="" aria-hidden="true" class="ds_aspect-box__inner" src="/binaries/content/gallery/designsystem/examples/processedcoo-jpg" />
</div>
</div>
<article class="ds_category-item ds_card__content">
<h2 class="ds_category-item__title">
<a href="#" class="ds_category-item__link">Farming and rural issues</a>
</h2>
<p class="ds_category-item__summary">
Guidance for farming, animal health, agriculture and food businesses in Scotland.
</p>
</article>
</li>
</ul>
</nav>