Card links
Use card links to help users reach the next stage of their NHS App journey.
<div class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Request repeat prescriptions
</a>
</div>
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</div>
{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
{{ nhsappCard({
title: 'Request repeat prescriptions',
href: '#'
}) }}To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
To use the component in your Vue application, install the NHS App Vue Component Library and import the component.
When to use
Use card links to take users:
- to the start of an NHS App service
- deeper into an area of the app
When not to use
Do not place card links in the middle of paragraph text.
How to use
The whole card should always act as a single, selectable link.
Use the variation below that fits best with the context.
Short card link
This is our preferred style. A concise phrase explains where the link goes. It can be read quickly because of the short amount of text.
<div class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Request repeat prescriptions
</a>
</div>
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</div>
{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
{{ nhsappCard({
title: 'Request repeat prescriptions',
href: '#'
}) }}To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
To use the component in your Vue application, install the NHS App Vue Component Library and import the component.
Card link with paragraph text
On pages deeper in the structure of the NHS App, users may need more details to understand where links go. In this case, you can use paragraph text below the heading to give more information.
Only use this variation if you have found a user need for more detailed links on a particular page.
<div class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Your approved prescriptions
</a>
<div class="nhsapp-card__below">
<p class="nhsuk-u-margin-top-1">
View prescriptions ready for pharmacy to prepare
</p>
</div>
</div>
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</div>
{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
{{ nhsappCard({
title: 'Your approved prescriptions',
href: '#',
description: 'View prescriptions ready for pharmacy to prepare'
}) }}To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
To use the component in your Vue application, install the NHS App Vue Component Library and import the component.
Using icons
Icons may help users to understand the meaning of a card link. We currently only use this variation for “Switch profiles” and “Messages” links on the homepage.
<div class="nhsapp-card">
<div class="nhsapp-card__container">
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M12.03 2.01c-5.49 0-9.96 4.49-9.96 10s4.47 10.01 9.96 10.01 9.96-4.49 9.96-10.01-4.47-10-9.96-10Zm0 1.5c4.66 0 8.46 3.82 8.46 8.51 0 .98-.17 1.91-.47 2.78a3.287 3.287 0 0 0-2.85-1.66h-3.29c-1.83 0-3.31 1.49-3.31 3.32l.04 3.93c-.18-.03-.35-.06-.52-.11l-.03-3.82c0-.67.19-1.29.49-1.83-.33-.14-.7-.23-1.09-.23H6.88c-1.03 0-1.93.58-2.4 1.43a8.437 8.437 0 0 1-.91-3.82c0-4.69 3.8-8.5 8.46-8.5Zm2.6 16.6Zm-1.39.32Zm-1.95.06Zm-1.21-.2Zm-5.6-4.45Zm4.68 4.17Zm-.85-.36c-.27-.13-.52-.28-.77-.43.25.16.51.3.77.43Zm8.73-.79a8.44 8.44 0 0 0 1.74-1.74c-.49.66-1.08 1.24-1.74 1.74Zm-2.26 1.2c.35-.12.68-.26 1.01-.43-.33.16-.66.31-1.01.43Zm1.15-.49Zm2.9-2.49c.51-.69.91-1.45 1.2-2.27a8.37 8.37 0 0 1-1.2 2.27Z"
/>
<path
d="M8.1 14.17c1.39 0 2.52-1.13 2.52-2.52S9.49 9.13 8.1 9.13s-2.52 1.13-2.52 2.52 1.13 2.52 2.52 2.52Zm7.33-1.54c1.77 0 3.21-1.44 3.21-3.21s-1.44-3.21-3.21-3.21-3.21 1.44-3.21 3.21 1.44 3.21 3.21 3.21Z"
/>
</svg>
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Switch profiles
</a>
</div>
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</div>
{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
{{ nhsappCard({
title: 'Switch profiles',
href: '#',
prefixIcon: 'switchProfile'
}) }}To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
To use the component in your Vue application, install the NHS App Vue Component Library and import the component.
Using badges
Use badges to alert users to new, important information that sits beyond a card link. This could include unread messages or new appointment details.
<div class="nhsapp-card">
<div class="nhsapp-card__container">
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M21.75 11.38a.76.76 0 0 0-.7-.08l-.77.31V4.47c0-.41-.34-.75-.75-.75H4.47c-.41 0-.75.34-.75.75v7.15l-.78-.31a.76.76 0 0 0-.7.08c-.21.14-.33.37-.33.62v9.27c0 .41.34.75.75.75h18.67c.41 0 .75-.34.75-.75v-9.27c0-.25-.12-.48-.33-.62ZM5.22 5.22h13.56v6.97L12 14.94l-6.78-2.75V5.22Zm15.36 15.3H3.41v-7.41l8.31 3.34c.18.07.38.07.56 0l8.3-3.34v7.41Z"
/>
</svg>
<div class="nhsapp-card__content">
<a
href="#"
class="nhsapp-card__link nhsuk-link--no-visited-state"
aria-label="Messages, you have 4 unread messages"
>
Messages
</a>
</div>
<p class="nhsapp-badge" aria-hidden="true">
<span class="nhsuk-u-visually-hidden">You have</span>
4
<span class="nhsuk-u-visually-hidden">unread messages</span>
</p>
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</div>
{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
{{ nhsappCard({
title: 'Messages',
href: '#',
prefixIcon: 'messages',
linkAriaLabel: 'Messages, you have 4 unread messages',
badgeLarge: {
count: 4,
label: 'unread messages',
ariaHidden: true
}
}) }}To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
To use the component in your Vue application, install the NHS App Vue Component Library and import the component.
Multiple card links
Multiple card links placed together must be marked up as lists in the HTML code. This helps screen reader users to navigate the content, for example by letting them know how many items there are in the list.
<ol class="nhsapp-cards nhsapp-cards--stacked">
<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
GP health record
</a>
</div>
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>
<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
View and manage prescriptions
</a>
</div>
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>
<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Upcoming and past appointments
</a>
</div>
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>
</ol>
{% from "nhsapp/components/card/macro.njk" import nhsappCardGroup %}
{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
{{ nhsappCardGroup({
stacked: true,
cards: [
{
title: 'GP health record',
href: '#'
},
{
title: 'View and manage prescriptions',
href: '#'
},
{
title: 'Upcoming and past appointments',
href: '#'
}
]
}) }}To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
To use the component in your Vue application, install the NHS App Vue Component Library and import the component.
If a page has a long list of card links, consider breaking them up using headings. This makes the information easier to digest and can help screen reader users who may navigate pages by headings.
<div class="nhsapp-section-heading">
<h2 class="nhsuk-heading-s">Your GP services</h2>
</div>
<ol class="nhsapp-cards nhsapp-cards--stacked">
<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Request repeat prescriptions
</a>
</div>
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>
<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Contact your GP surgery for a document or update
</a>
</div>
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>
<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Check for available GP appointments
</a>
</div>
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>
</ol>
<div class="nhsapp-section-heading">
<h2 class="nhsuk-heading-s">Other NHS services</h2>
</div>
<ol class="nhsapp-cards nhsapp-cards--stacked">
<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Book
</a>
</div>
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>
<li class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Request prescriptions
</a>
</div>
<svg
class="nhsapp-icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2em"
width="2em"
viewBox="0 0 24 24"
>
<path
d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
/>
</svg>
</div>
</li>
</ol>
{% from "nhsapp/components/card/macro.njk" import nhsappCardGroup %}
{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
{% from "nhsapp/styles/section-heading/macro.njk" import nhsappSectionHeading %}
{{ nhsappSectionHeading({
headingText: "Your GP services"
}) }}
{{ nhsappCardGroup({
stacked: true,
cards: [
{
title: 'Request repeat prescriptions',
href: '#'
},
{
title: 'Contact your GP surgery for a document or update',
href: '#'
},
{
title: 'Check for available GP appointments',
href: '#'
}
]
}) }}
{{ nhsappSectionHeading({
headingText: "Other NHS services"
}) }}
{{ nhsappCardGroup({
stacked: true,
cards: [
{
title: 'Book',
href: '#'
},
{
title: 'Request prescriptions',
href: '#'
}
]
}) }}To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
To use the component in your Vue application, install the NHS App Vue Component Library and import the component.
Content guidance
Aim to use active phrasing for card link text. This means starting the link text with a verb. For example: "Request repeat prescriptions" and "Check for available GP appointments". This follows content guidance on links and helps users to understand the action they can take.
However, you may find reasons to vary this to fit with the context. On the "Your health" hub, we mainly use noun phrases (such as "GP health record") for brevity and to avoid multiple links starting with the same verb.
In usability testing, we did not see evidence of this mixture of phrasing causing problems for users. We also noted that GOV.UK also vary link phrasing in a similar way. However, more research on link phrasing may be helpful to validate the best approach.
Research
In usability testing, people successfully navigated the NHS App and completed a range of tasks using short card links. They understood the meaning of the links despite the short amount of text.
In some usability testing involving card links with paragraph text, users have overlooked the paragraph text. However, paragraph text has been found to help users differentiate inboxes on the “Messages” hub.
The icons used on homepage card links were well understood in our user research. People were able to recognise the images and associate them with the link destination.
Knowledge gaps
As noted in the content guidance section above, more research into link phrasing may help us to understand the best way to word NHS App links.
Help improve this component
If you have used or researched this component, please let us know what you found so we can make it better for everyone.
Discuss 'Card links' on GitHub where you can share anything you think might be useful.
You can also share feedback with us on Slack.