Components

Card links

Use card links to help users reach the next stage of their NHS App journey.

Open this example (Card link) in a new tab 
<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 nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

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.

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.

Open this example (Card link short) in a new tab 
<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 nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

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.

Open this example (Card link with description) in a new tab 
<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 nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Using icons

Icons may help users to understand the meaning of a card link. We currently only use this variation for “Manage health services for others” and “Messages” links on the homepage.

Open this example (Card link icon) in a new tab 
<div class="nhsapp-card">
  <div class="nhsapp-card__container">
    <svg
      class="nhsapp-icon nhsapp-icon__switch-profile"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
      height="2rem"
      width="2rem"
      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 nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

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.

Open this example (Card link with description) in a new tab 
<div class="nhsapp-card">
  <div class="nhsapp-card__container">
    <svg
      class="nhsapp-icon nhsapp-icon__messages"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
      height="2rem"
      width="2rem"
      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 nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

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.

Open this example (Card link) in a new tab 
<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 nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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 nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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 nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

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.

Open this example (Card link) in a new tab 
<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 nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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 nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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 nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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 nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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 nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Use secondary card links on hub pages to signpost groups of information on less important topics.

Open this example (Card link secondary) in a new tab 
<div class="nhsapp-card nhsapp-card--secondary">
  <div class="nhsapp-card__container">
    <div class="nhsapp-card__content">
      <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
        Find NHS services near you
      </a>
    </div>

<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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: 'Find NHS services near you',
  href: '#',
  classes: 'nhsapp-card--secondary'
}) }}

Use them below primary card links which signpost more important information.

Open this example (Card link secondary stacked) in a new tab 
<div class="nhsapp-section-heading">
  <h2 class="nhsuk-heading-s">Settings</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">
Login and security
</a>
</div>


<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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">
Face ID
</a>
</div>


<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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">About the NHS App</h2>
</div>


<ol class="nhsapp-cards nhsapp-cards--stacked nhsapp-cards--secondary">
<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">
Privacy and legal policies
</a>
</div>


<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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">
Join our user research panel
</a>
</div>


<svg
class="nhsapp-icon nhsapp-icon__chevron-right"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
height="2rem"
width="2rem"
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: "Settings"
}) }}

{{ nhsappCardGroup({
  stacked: true,
  cards: [
    {
      title: 'Login and security',
      href: '#'
    },
    {
      title: 'Face ID',
      href: '#'
    }
  ]
}) }}

{{ nhsappSectionHeading({
  headingText: "About the NHS App"
}) }}

{{ nhsappCardGroup({
  stacked: true,
  classes: 'nhsapp-cards--secondary',
  cards: [
    {
      title: 'Privacy and legal policies',
      href: '#'
    },
    {
      title: 'Join our user research panel',
      href: '#'
    }
  ]
}) }}

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

The NHS App design system team would like to hear:

  • how you have used this component in your service
  • any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the 'Card links' discussion on GitHub.