Pages

Homepage

We're currently reviewing the homepage as part of an information architecture review.

The homepage shows the user their name and NHS number, and gives links to the most popular parts of the NHS App. We work this out using Adobe Analytics and user feedback. The homepage is also used to promote important health campaigns.

Open this example in a new tab

HTML
Nunjucks

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">
    <div class="nhsuk-u-margin-bottom-7 nhsuk-u-padding-top-4">
      <svg
        class="nhsuk-logo nhsuk-u-margin-bottom-1"
        xmlns="http://www.w3.org/2000/svg"
        focusable="false"
        viewBox="0 0 40 16"
        height="28"
        width="70"
        aria-describedby="nhs-logo-title"
        role="img"
      >
        <title id="nhs-logo-title">NHS</title>
        <path
          class="nhsuk-logo__background"
          fill="#005eb8"
          d="M0 0h40v16H0z"
        ></path>
        <path
          class="nhsuk-logo__text"
          fill="#fff"
          d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8
        9H1.1M17.3 1.5h3.6l-1
        4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2
        5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4
        0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3
        4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7
        3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"
        ></path>
      </svg>
      <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-2">
        <span class="app-greeting">Good morning</span>,
        <!-- Inline CSS added to sentence case the users name but need to check with nav team to see if we need to do this or not -->
        <span
          style="
            display: block;
            text-transform: capitalize;
            word-wrap: break-word;
          "
          >mary swanson</span
        >
      </h1>
      <p class="nhsuk-heading-s nhsuk-u-margin-bottom-0">
        NHS number:
        <span class="nhsuk-u-font-weight-normal">123 456 7890</span>
      </p>
    </div>
<div class="nhsapp-section-heading">
<h2 class="nhsuk-heading-s">Services</h2>
<a
class="nhsuk-link nhsuk-link--no-visited-state nhsuk-u-nowrap"
href="#"
aria-label="View all services"
>
View all
</a>
</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">
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>
</ol>
<div class="nhsapp-section-heading">
<h2 class="nhsuk-heading-s">Your health</h2>
<a
class="nhsuk-link nhsuk-link--no-visited-state nhsuk-u-nowrap"
href="#"
aria-label="View all your health"
>
View all
</a>
</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">
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>
<div class="nhsapp-section-heading">
<h2 class="nhsuk-heading-s">Messages</h2>
</div>
<ol class="nhsapp-cards nhsapp-cards--stacked">
<li 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">
View your messages
</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">Account</h2>
</div>
<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">
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>
</div>
</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">

    <div class="nhsuk-u-margin-bottom-7 nhsuk-u-padding-top-4">
      <svg class="nhsuk-logo nhsuk-u-margin-bottom-1" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 40 16" height="28" width="70" aria-describedby="nhs-logo-title" role="img">
        <title id="nhs-logo-title">NHS</title>
        <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
        <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8
        9H1.1M17.3 1.5h3.6l-1
        4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2
        5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4
        0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3
        4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7
        3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
      </svg>
      <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-2">
        <span class="app-greeting">Good morning</span>, 
        <!-- Inline CSS added to sentence case the users name but need to check with nav team to see if we need to do this or not -->
        <span style="display: block; text-transform: capitalize; word-wrap: break-word;">mary swanson</span>
      </h1>
      <p class="nhsuk-heading-s nhsuk-u-margin-bottom-0">
        NHS number:
        <span class="nhsuk-u-font-weight-normal">123 456 7890</span>
      </p>
    </div>

    {{ nhsappSectionHeading({
      headingText: "Services",
      linkText: "View all",
      linkUrl: "#",
      linkAriaLabel: "View all services"
    }) }}

    {{ nhsappCardGroup({
      stacked: true,
      cards: [
        {
          title: "Request repeat prescriptions",
          href: "#"
        },
        {
          title: "Check if you need urgent medical help using 111 online",
          href: "#"
        }
      ]
    }) }}

    {{ nhsappSectionHeading({
      headingText: "Your health",
      linkText: "View all",
      linkUrl: "#",
      linkAriaLabel: "View all your health"
    }) }}

    {{ nhsappCardGroup({
      stacked: true,
      cards: [
        {
          title: "GP health record",
          href: "#"
        },
        {
          title: "View and manage prescriptions",
          href: "#"
        },
        {
          title: "Upcoming and past appointments",
          href: "#"
        }
      ]
    }) }}

    {{ nhsappSectionHeading({
      headingText: "Messages"
    }) }}

    {% if data['messages'] > 0 %}
      {{ nhsappCardGroup({
        stacked: true,
        cards: [
          {
            title: 'View your messages',
            href: '#',
            prefixIcon: 'messagesUnread',
            linkAriaLabel: 'Messages, you have ' + data['messages'] + ' unread messages',
            badgeLarge: {
              count: data['messages'],
              label: 'unread messages',
              ariaHidden: true
            }
          }
        ]
      }) }}
    {% else %}
      {{ nhsappCardGroup({
        stacked: true,
        cards: [
          {
            title: 'View your messages',
            href: '#',
            prefixIcon: 'messages'
          }
        ]
      }) }}
    {% endif %}

    {{ nhsappSectionHeading({
      headingText: "Account"
    }) }}

    {{ nhsappCard({
      title: 'Manage services for another person',
      href: '#',
      prefixIcon: 'switchProfile'
    }) }}

  </div>
</div>

The structure of the homepage

Main heading

This main heading includes the name of the user and a greeting that changes depending on the time of day. The name is sourced from the personal demographics service (PDS) and may display in sentence case or block capitals depending on the data.

Below the name, we display the NHS number of the user. In research, participants regularly tell us they find having their NHS number here to be useful.

Section heading

We use section headings to separate links by which hub page of the app they come from. Alongside these section headings, ‘View all’ links lead to the relevant hub page.

Card links

Card links on the page lead either directly to the start of a journey, or to a hub page.

Campaign card

The campaign card promotes public health messaging agreed on by the senior leadership team of the NHS App that:

is relevant to most NHS App users
has an onward digital journey that meets our usability and accessibility standards

Proposing changes to the homepage

We’re careful to limit the number of links on the homepage. We need to make sure users can quickly scan through the page and access popular features.

The Navigation and Onboarding team maintains and updates the homepage. We regularly review and test the selection of links that are included. If you'd like to suggest changes to the homepage, please contact us on Slack.

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 'Homepage' on GitHub where you can share anything you think might be useful.

You can also share feedback with us on Slack.