Merge pull request #2468 from nhsuk/card-guidance-updates

Card guidance updates

Author: colinrotherham

CHANGELOG.md

@@ -1,5 +1,19 @@
 # NHS digital service manual Changelog
 
+## 8.9.0 - 2 April 2026
+
+:new: **New features**
+
+- Update card component guidance to make it clearer
+- Add section on actions in cards
+- Split out use of cards for navigation into new hub page pattern
+- Update NHS App greeting section in Writing NHS messages
+- Add section on using autocomplete attribute to date input
+
+:wrench: **Maintenance**
+
+- Remove care card page from components and redirect to care card pattern
+
 ## 8.8.0 - 19 March 2026
 
 :new: **New features**
@@ -10,9 +24,8 @@
 
 :wrench: **Maintenance**
 
-- Port Nunjucks syntax highlighting from GOV.UK Design System
+- Port Nunjucks syntax highlighting from GOV.UK design system
 - Support focus and keyboard left/right scrolling on code blocks
-- Split out hub page pattern from card component and updated content
 
 ## 8.7.2 - 2 March 2026
 

app.js

@@ -119,7 +119,8 @@ app.set('view engine', 'njk')
 // Nunjucks configuration
 const env = nunjucks.configure(config.nunjucksPaths, {
   express: app,
-  noCache: true,
+  lstripBlocks: true, // Remove leading spaces from a block/tag
+  trimBlocks: true, // Remove trailing newlines from a block/tag
   watch: true
 })
 
@@ -277,6 +278,14 @@ app.get('/design-example/components/checkboxes/hint', (req, res) => {
   res.redirect('/design-example/components/checkboxes/hint-text')
 })
 
+// Redirects for design system components
+
+app.get('/design-system/components/care-cards', (req, res) => {
+  res.redirect(
+    '/design-system/patterns/help-users-decide-when-and-where-to-get-care'
+  )
+})
+
 // Redirects for design system patterns
 
 app.get(

app/views/accessibility-statement.njk

@@ -1,11 +1,12 @@
 {% extends "layouts/app-layout-two-thirds.njk" %}
 
 {% set pageTitle = "Accessibility statement" %}
-{% set pageDescription = "NHS England is committed to making the NHS digital service manual accessible, in accordance with the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018." %}
+{% set pageDescription = "We aim to make the NHS digital service manual as accessible and easy to use as possible." %}
 {% set dateUpdated = "April 2026" %}
 
 {% block bodyContent %}
 
+<p>NHS England is committed to making the NHS digital service manual accessible, in accordance with the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018.</p>
 <p>This accessibility statement applies to the service manual website, its guidance and the code in its components and patterns.</p>
 
 <h2>How accessible this website is</h2>
@@ -22,7 +23,7 @@
 
 <h2>Preparation of this accessibility statement</h2>
 <p>We first published this statement in 2019.</p>
-<p>We have updated it after Dig Inclusion carried out an expert independent audit of the whole website in March 2024.</p>
+<p>We updated it after our accessibility auditors Dig Inclusion carried out an expert independent assessment of the whole website in March 2024.</p>
 <p>We last reviewed and updated the statement in March 2026 when Dig Inclusion audited new components and patterns against the WCAG 2.2 AA standard. (<a href="https://alpha.hugr.app/view/becd7a">The latest service manual audit report from Dig Inclusion is available on HUGR</a>.)</p>
 
 <h2>Feedback and contact information</h2>

app/views/content/writing-nhs-messages.njk

@@ -27,7 +27,7 @@
 
       <li class="app-side-nav__item"><a class="app-side-nav__link" href="/content/inclusive-content">Inclusive content</a></li>
 
-      <li class="app-side-nav__item app-side-nav__item--current"><a class="app-side-nav__link" href="/content/writing-nhs-messages">Writing NHS messages</a></li>
+      <li class="app-side-nav__item app-side-nav__item--current"><a class="app-side-nav__link" href="/content/writing-nhs-messages">Writing NHS messages</a>
         <ul class="app-side-nav__list app-side-nav__list--nested">
           <li class="app-side-nav__item"><a class="app-side-nav__link" href="#who-this-guidance-is-for">Who this guidance is for</a></li>
           <li class="app-side-nav__item"><a class="app-side-nav__link" href="#writing-effective-messages">Writing effective messages</a></li>
@@ -38,6 +38,8 @@
           <li class="app-side-nav__item"><a class="app-side-nav__link" href="#paper-letters">Paper letters</a></li>
           <li class="app-side-nav__item"><a class="app-side-nav__link" href="#supporting-accessibility-and-inclusion">Supporting accessibility and inclusion</a></li>
         </ul>
+      </li>
+
       <li class="app-side-nav__item"><a class="app-side-nav__link" href="/content/formatting">Formatting</a></li>
 
       <li class="app-side-nav__item"><a class="app-side-nav__link" href="/content/punctuation">Punctuation</a></li>
@@ -123,7 +125,7 @@
 <h4>Parent, carer and proxy</h4>
 <p>If you are writing to an adult who has another person looking after their health (sometimes called a proxy), greet the patient and not their carer to avoid confusion over who the communication is intended for.</p>
 <p>Try to avoid using the word "proxy". Research has shown users prefer "carer" or "trusted person".</p> 
-<p>However, for newborns or children greet the parent or carer. Try to include an identifying detail such as the name or date of birth of the child in the body of the message.</p>
+<p>However, greet the parent or carer if you are writing to newborns or children. Try to include an identifying detail such as the name or date of birth of the child in the body of the message.</p>
 <div class="app-example app-example--content">
   {{ tag({
     text: "Example",

app/views/design-system/components/card/card-actions/index.njk

@@ -0,0 +1,25 @@
+{% from "card/macro.njk" import card %}
+
+{% set cardDescriptionHtml %}
+  <p><strong>SenderID</strong>: NHS Blood Test</p>
+  <p>((firstName)) ((lastName)), you are due for your NHS blood test. Book your appointment or find out more at <a href="#">http://www.nhs.uk/service-name-invite</a></p>
+{% endset %}
+
+{{ card({
+  clickable: false,
+  heading: "Template: Appointment invitation 1",
+  headingSize: "m",
+  actions: {
+    items: [
+      {
+        text: "Edit",
+        href: "#"
+      },
+      {
+        text: "Delete",
+        href: "#"
+      }
+    ]
+  },
+  descriptionHtml: cardDescriptionHtml
+}) }}

app/views/design-system/components/card/clickable/index.njk

@@ -6,39 +6,39 @@
       primary: true,
       clickable: true,
       href: "#",
-      heading: "Introduction to care and support",
-      headingClasses: "nhsuk-heading-m",
-      description: "A quick guide for people who have care and support needs and their carers"
+      heading: "GPs",
+      headingSize: "m",
+      description: "About GP services, including how to find and register with a local GP and how to book an appointment"
     }) }}
   </li>
   <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
     {{ card({
       primary: true,
       clickable: true,
       href: "#",
-      heading: "Help from social services and charities",
-      headingClasses: "nhsuk-heading-m",
-      description: "Includes helplines, needs assessments, advocacy and reporting abuse."
+      heading: "Hospitals",
+      headingSize: "m",
+      description: "About NHS hospitals, booking and changing appointments with the NHS e-Referral Service and going into hospital"
     }) }}
   </li>
   <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
     {{ card({
       primary: true,
       clickable: true,
       href: "#",
-      heading: "Care services, equipment and care homes",
-      headingClasses: "nhsuk-heading-m",
-      description: "Includes home adaptations, help at home from a carer, social care you can get for free and housing."
+      heading: "Dentists",
+      headingSize: "m",
+      description: "About NHS dental services, how to find an NHS dentist and how much treatment costs"
     }) }}
   </li>
   <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
     {{ card({
       primary: true,
       clickable: true,
       href: "#",
-      heading: "Money, work and benefits",
-      headingClasses: "nhsuk-heading-m",
-      description: "How to pay for care and support, and where you can get help with costs"
+      heading: "Prescriptions",
+      headingSize: "m",
+      description: "Find out about prescriptions including charges, repeat prescriptions and if you can get free prescriptions"
     }) }}
   </li>
 </ul>

app/views/design-system/components/card/group-half/index.njk

@@ -6,7 +6,7 @@
       clickable: true,
       href: "#",
       heading: "5 steps to mental wellbeing",
-      headingClasses: "nhsuk-heading-m",
+      headingSize: "m",
       description: "Practical advice to help you feel mentally and emotionally better"
     }) }}
   </li>
@@ -15,7 +15,7 @@
       clickable: true,
       href: "#",
       heading: "Healthy weight",
-      headingClasses: "nhsuk-heading-m",
+      headingSize: "m",
       description: "Check your BMI using our healthy weight calculator and find out if you're a healthy weight"
     }) }}
   </li>
@@ -24,7 +24,7 @@
       clickable: true,
       href: "#",
       heading: "Exercise",
-      headingClasses: "nhsuk-heading-m",
+      headingSize: "m",
       description: "Programmes, workouts and tips to get you moving and improve your fitness and wellbeing"
     }) }}
   </li>

app/views/design-system/components/card/group-third/index.njk

@@ -1,7 +1,19 @@
 {% from "card/macro.njk" import card %}
 
 {{ card({
-  heading: "Heading level",
-  headingClasses: "nhsuk-heading-s",
+  heading: "Heading size large",
+  headingSize: "l",
+  description: "Card description text goes here"
+}) }}
+
+{{ card({
+  heading: "Heading size medium",
+  headingSize: "m",
+  description: "Card description text goes here"
+}) }}
+
+{{ card({
+  heading: "Heading size small",
+  headingSize: "s",
   description: "Card description text goes here"
 }) }}