Pages

Hub page

Hubs pages are the main menu pages in the NHS App. Each hub page contains a group of related links.

Open this example (Your health) in a new tab 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">
    <h1 class="nhsuk-u-margin-bottom-3">Your health</h1>
    <p class="nhsuk-u-margin-bottom-5">
      View your personal records and choices
    </p>

<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="/pages/your-health/prescriptions-p9"
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="/pages/your-health/upcoming-and-past-appointments-p9"
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>


<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">
Test results and imaging
</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">
COVID-19 vaccine 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">
NHS COVID Pass
</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="/pages/your-health/your-health-choices-p9"
class="nhsapp-card__link nhsuk-link--no-visited-state"
>
Your health choices
</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="/pages/your-health/care-plans-p9"
class="nhsapp-card__link nhsuk-link--no-visited-state"
>
Care plans
</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>
</div>


{% 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 %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">

    <h1 class="nhsuk-u-margin-bottom-3">Your health</h1>
    <p class="nhsuk-u-margin-bottom-5">View your personal records and choices</p>

    {{ nhsappCardGroup({
        stacked: true,
        cards: [
          {
            title: "GP health record",
            href: "#"
          },
          {
            title: "View and manage prescriptions",
            href: "/pages/your-health/prescriptions-p9"
          },
          {
            title: "Upcoming and past appointments",
            href: "/pages/your-health/upcoming-and-past-appointments-p9"
          },
          {
            title: "Test results and imaging",
            href: "#"
          },
          {
            title: "COVID-19 vaccine record",
            href: "#"
          },
          {
            title: "NHS COVID Pass",
            href: "#"
          },
          {
            title: "Your health choices",
            href: "/pages/your-health/your-health-choices-p9"
          },
          {
            title: "Care plans",
            href: "/pages/your-health/care-plans-p9"
          }
        ]
      })}}

  </div>
</div>

The structure of a hub page

Main heading

This is the name of the hub page.

Description text (optional)

You can use a brief description to give users more context about a hub page. We don’t include full stops at the end of this description, following a similar principle to the NHS service manual guidance on cards.

Section heading

Use section headings to break up card links into themes.

This can help users to scan the information on the page more easily and reduces the cognitive load. Research shows that people can be overwhelmed by long lists on NHS App pages.

Do not list more than 6 card links in a row without using a section heading.

Card links on the hub pages can lead either directly into a service or feature, or to a sub-hub where more options are available.

How to use hub pages

Hub pages are used as the main navigational pages within the information architecture of the NHS App. They must always be accessible from either the top navigation bar or the bottom navigation bar of the NHS App so that users can select them at any time.

How not to use hub pages

Do not include a back button on hub pages. Hub pages are the starting point for deeper pages in the app, which should always include a back button.

Current hub pages

Services

This is where users can take actions to arrange healthcare or look after their health. People visit this hub when they want to start using a transactional service. For example, to request a repeat prescription or book a GP appointment.

Open this example (Services) in a new tab 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">
    <h1 class="nhsuk-u-margin-bottom-3">Services</h1>
    <p class="nhsuk-u-margin-bottom-5">
      Get care and support to help you stay well
    </p>

<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 medicines
</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">
Check if you need urgent medical help using 111 online
</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">
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>
</li>
</ol>


<div class="nhsapp-section-heading">
<h2 class="nhsuk-heading-s">Find health information</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">
Browse NHS health information
</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">
Browse NHS medicines information
</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">
Find COVID-19 guidance
</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>
</div>


{% 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 %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">

    <h1 class="nhsuk-u-margin-bottom-3">Services</h1>
    <p class="nhsuk-u-margin-bottom-5">Get care and support to help you stay well</p>

    {{ nhsappSectionHeading({
      headingText: "Your GP services"
    }) }}

    {{ nhsappCardGroup({
      stacked: true,
      cards: [
        {
          title: 'Request medicines',
          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: 'Check if you need urgent medical help using 111 online',
          href: '#'
        },
        {
          title: 'Find NHS services near you',
          href: '#'
        }
      ]
    }) }}

    {{ nhsappSectionHeading({
      headingText: "Find health information"
    }) }}

    {{ nhsappCardGroup({
        stacked: true,
        cards: [
          {
            title: "Browse NHS health information",
            href: "#"
          },
          {
            title: "Browse NHS medicines information",
            href: "#"
          },
          {
            title: "Find COVID-19 guidance",
            href: "#"
          }
        ]
      })}}

  </div>
</div>

Your health

This is where users can view and manage their personal records, health choices and requests that are already in progress. For example, to manage an upcoming appointment, track a prescription request or view their GP health record.

Open this example (Your health) in a new tab 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">
    <h1 class="nhsuk-u-margin-bottom-3">Your health</h1>
    <p class="nhsuk-u-margin-bottom-5">
      View your personal records and choices
    </p>

<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="/pages/your-health/prescriptions-p9"
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="/pages/your-health/upcoming-and-past-appointments-p9"
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>


<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">
Test results and imaging
</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">
COVID-19 vaccine 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">
NHS COVID Pass
</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="/pages/your-health/your-health-choices-p9"
class="nhsapp-card__link nhsuk-link--no-visited-state"
>
Your health choices
</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="/pages/your-health/care-plans-p9"
class="nhsapp-card__link nhsuk-link--no-visited-state"
>
Care plans
</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>
</div>


{% 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 %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">

    <h1 class="nhsuk-u-margin-bottom-3">Your health</h1>
    <p class="nhsuk-u-margin-bottom-5">View your personal records and choices</p>

    {{ nhsappCardGroup({
        stacked: true,
        cards: [
          {
            title: "GP health record",
            href: "#"
          },
          {
            title: "View and manage prescriptions",
            href: "/pages/your-health/prescriptions-p9"
          },
          {
            title: "Upcoming and past appointments",
            href: "/pages/your-health/upcoming-and-past-appointments-p9"
          },
          {
            title: "Test results and imaging",
            href: "#"
          },
          {
            title: "COVID-19 vaccine record",
            href: "#"
          },
          {
            title: "NHS COVID Pass",
            href: "#"
          },
          {
            title: "Your health choices",
            href: "/pages/your-health/your-health-choices-p9"
          },
          {
            title: "Care plans",
            href: "/pages/your-health/care-plans-p9"
          }
        ]
      })}}

  </div>
</div>

Messages

This is where users can read, and sometimes reply to, messages from their healthcare services. The number and type of inboxes available to them will depend on their GP surgery.

Open this example (Messages) in a new tab 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">
    <h1 class="nhsuk-u-margin-bottom-3">Messages</h1>
    <p class="nhsuk-u-margin-bottom-5">You have 4 inboxes</p>

<ol class="nhsapp-cards">
<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">
Your NHS healthcare services
</a>
<p class="nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-2">
You may receive messages:
</p>
<ul>
<li>from your GP surgery</li>
<li>about hospital and specialist care appointments</li>
<li>about invitations and reminders</li>
</ul>
</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">
Your hospital and specialist doctors
</a>
<p class="nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-2">
You may send or receive messages about:
</p>
<ul>
<li>your health record</li>
<li>documents and letters</li>
<li>pre-appointment questionnaires</li>
</ul>
</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">
Replies to your GP requests
</a>
<p class="nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-2">
You may receive responses to queries you submitted about:
</p>
<ul>
<li>health problems</li>
<li>fit (sick) notes</li>
<li>doctor's letters</li>
</ul>
</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">
GP surgery messaging
</a>
<div class="nhsapp-card__below">
<p class="nhsuk-u-margin-top-1">
Send and view messages from staff at your GP surgery
</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>
</li>
</ol>
</div>
</div>


{% 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 %}
{% from "nhsapp/components/badge/large/macro.njk" import nhsappBadgeLarge %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">

    <h1 class="nhsuk-u-margin-bottom-3">Messages</h1>
    <p class="nhsuk-u-margin-bottom-5">You have 4 inboxes</p>

    {% if data['messages'] > 0 %}
      {% set badge %}
        {{ nhsappBadgeLarge({
          count: data['messages'],
          label: 'notifications',
          classes: "nhsuk-u-margin-bottom-3"
        }) }}
      {% endset %}
    {% else %}
    {% endif %}

    {{ nhsappCardGroup({
      cards: [
        {
          aboveContent: { 
            html: badge
          },
          title: "Your NHS healthcare services",
          href: "#",
          html: "<p class='nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-2'>You may receive messages:</p>
          <ul><li>from your GP surgery</li><li>about hospital and specialist care appointments</li><li>about invitations and reminders</li></ul>"
        },
        {
          title: "Your hospital and specialist doctors",
          href: "#",
          html: "<p class='nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-2'>You may send or receive messages about:</p>
          <ul><li>your health record</li><li>documents and letters</li><li>pre-appointment questionnaires</li></ul>"
        },
        {
          title: "Replies to your GP requests",
          href: "#",
          html: "<p class='nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-2'>You may receive responses to queries you submitted about:</p>
          <ul><li>health problems</li><li>fit (sick) notes</li><li>doctor's letters</li></ul>"
        },
        {
          title: "GP surgery messaging",
          href: "#",
          description: "Send and view messages from staff at your GP surgery"
        }
      ]
    })}}

  </div>
</div>

Account

In this area, users can change their contact and log in details (their NHS login) or manage services for another person. They can also change NHS App settings such as notifications, biometric login and cookies preferences.

Open this example (Account) in a new tab 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">
    <h1 class="nhsuk-u-margin-bottom-5">Account</h1>

<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">
Manage services for another person
</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">
Settings
</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">
Help and support
</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>


<button
class="nhsuk-button nhsapp-button--secondary nhsapp-button"
data-module="nhsuk-button"
type="submit"
>
Log out
</button>
</div>
</div>


{% from "nhsapp/components/card/macro.njk" import nhsappCardGroup %}
{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
{% from 'button/macro.njk' import button %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">

    <h1 class="nhsuk-u-margin-bottom-5">Account</h1>

    {{ nhsappCardGroup({
      stacked: true,
      cards: [
        {
          title: 'Manage services for another person',
          href: '#'
        },
        {
          title: 'Settings',
          href: '#'
        },
        {
          title: 'Help and support',
          href: '#'
        }
      ]
    }) }}

    {{ button({
      text: "Log out",
      classes: "nhsapp-button--secondary nhsapp-button"
    }) }}

  </div>
</div>

Help improve this pattern

If you have used or researched this pattern, please let us know what you found so we can make it better for everyone.

Discuss 'Hub page' on GitHub where you can share anything you think might be useful.

You can also share feedback with us on Slack.