Card navigation
Card navigation displays links and summary text in boxes with an optional image.
HTML
<div class="ds_wrapper">
<div class="ds_card-grid-container">
<div class="ds_card-grid ds_card-grid--min-height ds_card-grid--narrow ds_card-grid--medium-2">
<div class="ds_card ds_card--navigation">
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Environment and countryside</a></h2>
</div>
<div class="ds_card__content-main">Access to and protection of the countryside and managing wildlife on your land</div>
</div>
</div>
<div class="ds_card ds_card--navigation">
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Environmental Impact Assessment (EIA)</a></h2>
</div>
<div class="ds_card__content-main">Find out about Environmental Impact Assessments (EIAs) in your area</div>
</div>
</div>
<div class="ds_card ds_card--navigation">
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Farming and rural issues</a></h2>
</div>
<div class="ds_card__content-main">Guidance for farming, animal health, agriculture and food businesses in Scotland</div>
</div>
</div>
<div class="ds_card ds_card--navigation">
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Waste and energy</a></h2>
</div>
<div class="ds_card__content-main">Find advice and support to help your business become more environmentally aware and efficient</div>
</div>
</div>
<div class="ds_card ds_card--navigation">
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Marine and fisheries</a></h2>
</div>
<div class="ds_card__content-main">Includes information on safety at sea and managing crew</div>
</div>
</div>
</div>
</div>
</div>About card navigation
Card navigation displays hyperlinked headings and summary text using cards inside a card grid.
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.
HTML
<div class="ds_wrapper">
<div class="ds_card-grid-container">
<div class="ds_card-grid ds_card-grid--medium-2">
<div class="ds_card ds_card--navigation">
<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>
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Environment</a></h2>
</div>
<div class="ds_card__content-main">Access to and protection of the countryside and managing wildlife on your land</div>
</div>
</div>
<div class="ds_card ds_card--navigation">
<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>
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Business and innovation</a></h2>
</div>
<div class="ds_card__content-main">Tools and guidance on getting started, finance, premises and employing people</div>
</div>
</div>
<div class="ds_card ds_card--navigation">
<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>
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Tourism and things to do</a></h2>
</div>
<div class="ds_card__content-main">Accommodation, events, galleries, museums, the countryside and wildlife</div>
</div>
</div>
<div class="ds_card ds_card--navigation">
<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>
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Climate change</a></h2>
</div>
<div class="ds_card__content-main">Find advice and support to help your business become more environmentally aware and efficient</div>
</div>
</div>
<div class="ds_card ds_card--navigation">
<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>
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Farming and rural issues</a></h2>
</div>
<div class="ds_card__content-main">Guidance for farming, animal health, agriculture and food businesses in Scotland</div>
</div>
</div>
</div>
</div>
</div>