"
}) }}
diff --git a/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/urgent/index.njk b/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/urgent/index.njk
index fee12f7ed..5f056d146 100644
--- a/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/urgent/index.njk
+++ b/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/urgent/index.njk
@@ -2,14 +2,14 @@
{{ card({
type: "urgent",
- heading: "Ask for an urgent GP appointment if:",
+ heading: "Ask for an urgent GP appointment or get help from NHS 111 if you have:",
descriptionHtml: "
-
you're an adult and have chickenpox
-
you're pregnant and haven't had chickenpox before and you've been near someone with it
-
you have a weakened immune system and you've been near someone with chickenpox
-
you think your newborn baby has chickenpox
+
pain in your eyes
+
changes to your vision, such as vision loss or blurred vision
+
very red eyes
-
In these situations, your GP can prescribe medicine to prevent complications. You need to take it within 24 hours of the spots coming out.
Use breadcrumbs to give users context and let them move back or up a level if they can't find what they want on the
page.
@@ -64,12 +54,18 @@
You don't need to show the current page in the breadcrumb because this information is in the H1.
On mobile, we replace the full breadcrumb trail with a "Back to [parent]" link.
-
-
Accessibility
-
We use aria-label="breadcrumb" as a label in the nav element to let people who use
+
We use aria-label="breadcrumb" as a label in the nav element to let people who use
screen readers know what it is.
-
We add aria-hidden="true" to the svg icons
- to hide them from people who use screen readers.
+
+
Breadcrumbs on dark backgrounds
+
Use the nhsuk-breadcrumb--reverse modifier class to show white links and arrows on dark backgrounds – for example, in headers, custom components, and patterns with darker backgrounds.
We tested breadcrumbs on pages with lots of content about conditions or medicines. They helped people understand
@@ -77,6 +73,6 @@
back to where they came from or to get back home.
We took out the breadcrumb links when we tested our pages in transactional journeys (in more than 3 labs). We thought
that having extra links would distract users and that fewer people would complete the journey. As we expected, we
- found that users didn't miss the links because they were focused on the task.
+ found that users did miss the links because they were focused on the task.
{% endblock %}
diff --git a/app/views/design-system/components/breadcrumbs/reverse/index.njk b/app/views/design-system/components/breadcrumbs/reverse/index.njk
index 6a2119478..f12f912a7 100644
--- a/app/views/design-system/components/breadcrumbs/reverse/index.njk
+++ b/app/views/design-system/components/breadcrumbs/reverse/index.njk
@@ -9,13 +9,13 @@ background: blue
items: [
{
href: "#",
- text: "Level one"
+ text: "Home"
},
{
href: "#",
- text: "Level two"
+ text: "NHS services"
}
],
href: "#",
- text: "Level three"
+ text: "Hospitals"
}) }}
From aeffac83555586f1db50800ea5055066c2f8a6f9 Mon Sep 17 00:00:00 2001
From: anandamaryon1 <159916913+anandamaryon1@users.noreply.github.com>
Date: Tue, 12 Aug 2025 15:48:22 +0100
Subject: [PATCH 03/30] add action-link to emergency care card example. needs
style fixes in frontend.
---
.../emergency/index.njk | 16 +++++++++++-----
1 file changed, 11 insertions(+), 5 deletions(-)
diff --git a/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/emergency/index.njk b/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/emergency/index.njk
index c692fa4f5..4aaf92025 100644
--- a/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/emergency/index.njk
+++ b/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/emergency/index.njk
@@ -1,13 +1,19 @@
{% from 'card/macro.njk' import card %}
+{% from 'action-link/macro.njk' import actionLink %}
-{{ card({
+{% call card({
type: "emergency",
- heading: "Call 999 or go to A&E now if:",
- descriptionHtml: "
+ heading: "Call 999 or go to A&E now if:"
+}) %}
+
you're coughing up more than just a few spots or streaks of blood – this could be a sign of serious bleeding in your lungs
you have severe difficulty breathing – you're gasping, choking or not able to get words out
We tested breadcrumbs on pages with lots of content about conditions or medicines. They helped people understand
their place on the website. People noticed them and appreciated the context they gave. People also used them to get
back to where they came from or to get back home.
-
We took out the breadcrumb links when we tested our pages in transactional journeys (in more than 3 labs). We thought
- that having extra links would distract users and that fewer people would complete the journey. As we expected, we
- found that users did miss the links because they were focused on the task.
+
We took out the breadcrumb links when we tested our pages in transactional journeys (in more than 3 labs). We thought that having breadcrumb links would distract users from completing the journey. We found that they did not need the breadcrumbs because they were focused on the task.
You don't need to show the current page in the breadcrumb because this information is in the H1.
+
You do not need to show the current page in the breadcrumb because this information is in the H1.
On mobile, we replace the full breadcrumb trail with a "Back to [parent]" link.
We use aria-label="breadcrumb" as a label in the nav element to let people who use
screen readers know what it is.
Breadcrumbs on dark backgrounds
-
Use the nhsuk-breadcrumb--reverse modifier class to show white links and arrows on dark backgrounds – for example, in headers, custom components, and patterns with darker backgrounds.
Use the nhsuk-breadcrumb--reverse modifier class to show white links and arrows on dark backgrounds, for example, in headers, custom components, and patterns with darker backgrounds.
"
}) }}
From 5bdf4bf857212fdd9623cd533a4b06bb38b6519b Mon Sep 17 00:00:00 2001
From: anandamaryon1 <159916913+anandamaryon1@users.noreply.github.com>
Date: Wed, 3 Sep 2025 16:47:01 +0100
Subject: [PATCH 08/30] apply reverse action link style to emergency care card
example
---
.../emergency/index.njk | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/emergency/index.njk b/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/emergency/index.njk
index 4aaf92025..db4a67074 100644
--- a/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/emergency/index.njk
+++ b/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/emergency/index.njk
@@ -12,8 +12,9 @@
{{ actionLink({
- "text": "Find your nearest A&E",
- "href": "#"
+ text: "Find your nearest A&E",
+ href: "#",
+ classes: "nhsuk-action-link--reverse"
}) }}
{% endcall %}
From 8b8164d0b86467c5875b7984f15809a2c070d830 Mon Sep 17 00:00:00 2001
From: Sara Wilcox <45792959+sarawilcox@users.noreply.github.com>
Date: Thu, 11 Sep 2025 11:55:26 +0000
Subject: [PATCH 09/30] Amend coded examples question re being contacted
---
.../write-the-supporting-content-for-your-form.njk | 2 +-
.../components/checkboxes/conditional/index.njk | 2 +-
.../design-system/components/checkboxes/default/index.njk | 2 +-
.../components/checkboxes/error-messages/index.njk | 4 ++--
.../design-system/components/checkboxes/hint/index.njk | 2 +-
app/views/design-system/components/checkboxes/index.njk | 2 +-
.../components/error-summary/link-options/index.njk | 6 +++---
.../design-system/components/hint-text/checkboxes/index.njk | 2 +-
.../design-system/components/radios/conditional/index.njk | 4 ++--
9 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/app/views/content/how-to-write-good-questions-for-forms/write-the-supporting-content-for-your-form.njk b/app/views/content/how-to-write-good-questions-for-forms/write-the-supporting-content-for-your-form.njk
index 4f1225b68..5eaf23b33 100644
--- a/app/views/content/how-to-write-good-questions-for-forms/write-the-supporting-content-for-your-form.njk
+++ b/app/views/content/how-to-write-good-questions-for-forms/write-the-supporting-content-for-your-form.njk
@@ -42,7 +42,7 @@
name: "contact",
fieldset: {
legend: {
- text: "How would you like to be contacted?",
+ text: "How do you want to be contacted about this?",
classes: "nhsuk-fieldset__legend--m"
}
},
diff --git a/app/views/design-system/components/checkboxes/conditional/index.njk b/app/views/design-system/components/checkboxes/conditional/index.njk
index 954fdf744..a683c12f8 100644
--- a/app/views/design-system/components/checkboxes/conditional/index.njk
+++ b/app/views/design-system/components/checkboxes/conditional/index.njk
@@ -39,7 +39,7 @@
name: "contact",
fieldset: {
legend: {
- text: "How would you prefer to be contacted?",
+ text: "How do you want to be contacted about this?",
classes: "nhsuk-fieldset__legend--l",
isPageHeading: "true"
}
diff --git a/app/views/design-system/components/checkboxes/default/index.njk b/app/views/design-system/components/checkboxes/default/index.njk
index a6a016beb..6c050e9ed 100644
--- a/app/views/design-system/components/checkboxes/default/index.njk
+++ b/app/views/design-system/components/checkboxes/default/index.njk
@@ -5,7 +5,7 @@
name: "example",
fieldset: {
legend: {
- text: "How would you like to be contacted?",
+ text: "How do you want to be contacted about this?",
classes: "nhsuk-fieldset__legend--l",
isPageHeading: true
}
diff --git a/app/views/design-system/components/checkboxes/error-messages/index.njk b/app/views/design-system/components/checkboxes/error-messages/index.njk
index 6a77e2997..c5c8cca29 100644
--- a/app/views/design-system/components/checkboxes/error-messages/index.njk
+++ b/app/views/design-system/components/checkboxes/error-messages/index.njk
@@ -5,7 +5,7 @@
name: "contact",
fieldset: {
legend: {
- text: "How would you like to be contacted?",
+ text: "How do you want to be contacted about this?",
classes: "nhsuk-fieldset__legend--l",
isPageHeading: true
}
@@ -14,7 +14,7 @@
text: "Select all options that are relevant to you"
},
errorMessage: {
- text: "Select how you like to be contacted"
+ text: "Select how you want to be contacted"
},
items: [
{
diff --git a/app/views/design-system/components/checkboxes/hint/index.njk b/app/views/design-system/components/checkboxes/hint/index.njk
index 20307ed9b..0f5ca3ad3 100644
--- a/app/views/design-system/components/checkboxes/hint/index.njk
+++ b/app/views/design-system/components/checkboxes/hint/index.njk
@@ -5,7 +5,7 @@
name: "contact",
fieldset: {
legend: {
- text: "How would you like to be contacted?",
+ text: "How do you want to be contacted about this?",
classes: "nhsuk-fieldset__legend--l",
isPageHeading: true
}
diff --git a/app/views/design-system/components/checkboxes/index.njk b/app/views/design-system/components/checkboxes/index.njk
index d72e5b24d..0354c0de0 100644
--- a/app/views/design-system/components/checkboxes/index.njk
+++ b/app/views/design-system/components/checkboxes/index.njk
@@ -40,7 +40,7 @@
Do not use the checkboxes component if users can only choose 1 option from a selection. In this case, use a radio.
How to use checkboxes
-
Group checkboxes together in a <fieldset> with a <legend> that describes them. You can see an example at the top of this page. The legend is usually a question, like "How would you like to be contacted?".
+
Group checkboxes together in a <fieldset> with a <legend> that describes them. You can see an example at the top of this page. The legend is usually a question, like "How do you want to be contacted about this?".
If you're asking just 1 question per page as we recommend, you can set the contents of the <legend> as the page heading. This is good practice as it means screen reader users will only hear the contents once.
diff --git a/app/views/design-system/components/error-summary/link-options/index.njk b/app/views/design-system/components/error-summary/link-options/index.njk
index bd16ea18f..626ef5cb0 100644
--- a/app/views/design-system/components/error-summary/link-options/index.njk
+++ b/app/views/design-system/components/error-summary/link-options/index.njk
@@ -5,7 +5,7 @@
titleText: "There is a problem",
errorList: [
{
- text: "Select how you like to be contacted",
+ text: "Select how you want to be contacted",
href: "#contact"
}
]
@@ -16,7 +16,7 @@
name: "contact",
fieldset: {
legend: {
- text: "How would you like to be contacted?",
+ text: "How do you want to be contacted about this?",
classes: "nhsuk-fieldset__legend--l",
isPageHeading: true
}
@@ -25,7 +25,7 @@
text: "Select all options that are relevant to you"
},
errorMessage: {
- text: "Select how you like to be contacted"
+ text: "Select how you want to be contacted"
},
items: [
{
diff --git a/app/views/design-system/components/hint-text/checkboxes/index.njk b/app/views/design-system/components/hint-text/checkboxes/index.njk
index 20307ed9b..6d12195b2 100644
--- a/app/views/design-system/components/hint-text/checkboxes/index.njk
+++ b/app/views/design-system/components/hint-text/checkboxes/index.njk
@@ -5,7 +5,7 @@
name: "contact",
fieldset: {
legend: {
- text: "How would you like to be contacted?",
+ text: "How do you want to be contacted about this?,
classes: "nhsuk-fieldset__legend--l",
isPageHeading: true
}
diff --git a/app/views/design-system/components/radios/conditional/index.njk b/app/views/design-system/components/radios/conditional/index.njk
index 070598885..5f657ba18 100644
--- a/app/views/design-system/components/radios/conditional/index.njk
+++ b/app/views/design-system/components/radios/conditional/index.njk
@@ -39,13 +39,13 @@
name: "contact",
fieldset: {
legend: {
- text: "How would you prefer to be contacted?",
+ text: "How do you want to be contacted about this?",
classes: "nhsuk-fieldset__legend--l",
isPageHeading: "true"
}
},
hint: {
- text: "Select one option"
+ text: "Select 1 option"
},
items: [
{
From 2f2fd8160307392823ec2189d10598b59eedeb1f Mon Sep 17 00:00:00 2001
From: Colin Rotherham
Date: Thu, 11 Sep 2025 13:51:45 +0100
Subject: [PATCH 10/30] Update reverse back link and action link content
---
.../components/action-link/index.njk | 21 +++++++++---------
.../components/back-link/index.njk | 22 +++++++++----------
2 files changed, 21 insertions(+), 22 deletions(-)
diff --git a/app/views/design-system/components/action-link/index.njk b/app/views/design-system/components/action-link/index.njk
index 244034d47..d95125117 100644
--- a/app/views/design-system/components/action-link/index.njk
+++ b/app/views/design-system/components/action-link/index.njk
@@ -13,8 +13,6 @@
{% endblock %}
{% block bodyContent %}
-
There are 2 versions of the action link: the default version and the reverse version.
You can have more than one action link on a page but avoid putting them near each other.
+
The link colour and background colour contrast ratio is 5.76:1, which passes AAA guidelines at that font size.
+
+
Action link on dark backgrounds
+
Use the nhsuk-action-link--reverse modifier class to show white links and arrows on dark backgrounds – for example, in custom components and patterns with darker backgrounds.
We only use back links on transactional services or multi-page forms.
The GOV.UK design system recommends
@@ -82,7 +72,6 @@
href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.2 success criterion 2.5.8 Target Size (W3C).
-
Back link as a button
You can render the back link as a button element if necessary in order to post form
data back to the previous page.
@@ -93,8 +82,17 @@
type: "button"
}) }}
+
Back link on dark backgrounds
+
Use the nhsuk-back-link--reverse modifier class to show white links and arrows on dark backgrounds – for example, in headers, custom components, and patterns with darker backgrounds.
During testing, NHS 111 online found that some users wanted to change their
answers, so they introduced a back link and labelled it to "Change my previous answer".
-
{% endblock %}
From 7557facb119de47fdf8b5088ab5b8c9bf94abab1 Mon Sep 17 00:00:00 2001
From: Colin Rotherham
Date: Thu, 11 Sep 2025 14:06:51 +0100
Subject: [PATCH 11/30] Fix error 404 page for design examples
---
app.js | 7 ++++++-
lib/file-helper.js | 14 ++++++++++++++
2 files changed, 20 insertions(+), 1 deletion(-)
diff --git a/app.js b/app.js
index 05799897e..8440c2aee 100755
--- a/app.js
+++ b/app.js
@@ -101,9 +101,14 @@ env.addFilter('highlight', filters.highlight)
env.addFilter('markdown', filters.markdown)
// Render standalone design examples
-app.get('/design-example/:group/:item/:type', (req, res) => {
+app.get('/design-example/:group/:item/:type', (req, res, next) => {
const { group, item, type } = req.params
+ // Continue to 404 page
+ if (!fileHelper.hasNunjucksPath({ group, item, type })) {
+ return next()
+ }
+
// Get the given example as HTML.
const exampleHtml = fileHelper.getHTMLCode({
group,
diff --git a/lib/file-helper.js b/lib/file-helper.js
index 96bb0305e..390156e91 100644
--- a/lib/file-helper.js
+++ b/lib/file-helper.js
@@ -83,6 +83,15 @@ function getNunjucksParams(item) {
return params
}
+/**
+ * Check Nunjucks path for an example exists
+ *
+ * @param {FileOptions} options
+ */
+function hasNunjucksPath({ group, item, type }) {
+ return existsSync(getNunjucksPath({ group, item, type }))
+}
+
/**
* Get Nunjucks path for an example
*
@@ -151,6 +160,10 @@ function getFrontmatter({ group, item, type }) {
// Path to Nunjucks example template
const path = getNunjucksPath({ group, item, type })
+ if (!existsSync(path)) {
+ return frontmatter
+ }
+
try {
frontmatter = matter(getFileContents(path))
} catch {
@@ -187,6 +200,7 @@ function getAssetPath(pathname = '') {
module.exports = {
getNunjucksParams,
+ hasNunjucksPath,
getNunjucksPath,
getNunjucksCode,
getHTMLCode,
From cbc892d4bdaa99edd59287b9679c9c79d1f1eacd Mon Sep 17 00:00:00 2001
From: Colin Rotherham
Date: Thu, 11 Sep 2025 14:08:33 +0100
Subject: [PATCH 12/30] Move and redirect checkboxes hint text example
---
app.js | 6 ++++++
.../components/checkboxes/{hint => hint-text}/index.njk | 0
app/views/design-system/components/checkboxes/index.njk | 2 +-
3 files changed, 7 insertions(+), 1 deletion(-)
rename app/views/design-system/components/checkboxes/{hint => hint-text}/index.njk (100%)
diff --git a/app.js b/app.js
index 8440c2aee..782f194fd 100755
--- a/app.js
+++ b/app.js
@@ -235,6 +235,12 @@ app.get(
}
)
+// Redirects for design system examples
+
+app.get('/design-example/components/checkboxes/hint', (req, res) => {
+ res.redirect('/design-example/components/checkboxes/hint-text')
+})
+
// Redirects for design system patterns
app.get(
diff --git a/app/views/design-system/components/checkboxes/hint/index.njk b/app/views/design-system/components/checkboxes/hint-text/index.njk
similarity index 100%
rename from app/views/design-system/components/checkboxes/hint/index.njk
rename to app/views/design-system/components/checkboxes/hint-text/index.njk
diff --git a/app/views/design-system/components/checkboxes/index.njk b/app/views/design-system/components/checkboxes/index.njk
index 0354c0de0..d789d3fa9 100644
--- a/app/views/design-system/components/checkboxes/index.njk
+++ b/app/views/design-system/components/checkboxes/index.njk
@@ -51,7 +51,7 @@
{{ designExample({
group: "components",
item: "checkboxes",
- type: "hint"
+ type: "hint-text"
}) }}
Checkbox items with hints
From 846712ae8a3e6ff06453dce32ad44c72d0565aaa Mon Sep 17 00:00:00 2001
From: Colin Rotherham
Date: Thu, 11 Sep 2025 14:34:51 +0100
Subject: [PATCH 13/30] Fix typo in checkboxes hint text example
---
.../design-system/components/hint-text/checkboxes/index.njk | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/views/design-system/components/hint-text/checkboxes/index.njk b/app/views/design-system/components/hint-text/checkboxes/index.njk
index 6d12195b2..0f5ca3ad3 100644
--- a/app/views/design-system/components/hint-text/checkboxes/index.njk
+++ b/app/views/design-system/components/hint-text/checkboxes/index.njk
@@ -5,7 +5,7 @@
name: "contact",
fieldset: {
legend: {
- text: "How do you want to be contacted about this?,
+ text: "How do you want to be contacted about this?",
classes: "nhsuk-fieldset__legend--l",
isPageHeading: true
}
From c1b5e03806e2b938879c03b4b46a9b8dadbbc6cf Mon Sep 17 00:00:00 2001
From: Sara Wilcox <45792959+sarawilcox@users.noreply.github.com>
Date: Mon, 15 Sep 2025 13:51:20 +0000
Subject: [PATCH 14/30] Shorten and align wording about reverse examples
---
CHANGELOG.md | 6 ++++++
.../design-system/components/action-link/index.njk | 11 ++++-------
.../design-system/components/back-link/index.njk | 4 ++--
.../design-system/components/breadcrumbs/index.njk | 4 ++--
app/views/design-system/styles/typography/index.njk | 2 +-
5 files changed, 15 insertions(+), 12 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1e8f1c03b..474e23d13 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
# NHS digital service manual Changelog
+## Unreleased
+
+:wrench: **Maintenance**
+
+- Update wording about reverse examples
+
## 8.1.0 - 24 September 2025
:new: **New features**
diff --git a/app/views/design-system/components/action-link/index.njk b/app/views/design-system/components/action-link/index.njk
index d95125117..05ac4eb97 100644
--- a/app/views/design-system/components/action-link/index.njk
+++ b/app/views/design-system/components/action-link/index.njk
@@ -3,7 +3,7 @@
{% set subSection = "Components" %}
{% set pageDescription = "Use action links to help users get to the next stage of a journey quickly by signposting the start of a digital service." %}
{% set theme = "Navigation" %}
-{% set dateUpdated = "August 2025" %}
+{% set dateUpdated = "September 2025" %}
{% set backlog_issue_id = "5" %}
{% extends "layouts/app-layout.njk" %}
@@ -42,8 +42,8 @@
The link colour and background colour contrast ratio is 5.76:1, which passes AAA guidelines at that font size.
Action link on dark backgrounds
-
Use the nhsuk-action-link--reverse modifier class to show white links and arrows on dark backgrounds – for example, in custom components and patterns with darker backgrounds.
The link colour and background colour contrast ratio is 5.76:1, which passes AAA guidelines at that font size.
-
Research
We tested the action links on health information pages with lots of content, callout boxes and multi-page navigation.
Users didn't notice early versions, so we made the size of the text larger than body text size.
-
We used NHS blue first but users didn't notice it. So we changed the arrow colour to green - our "action" colour. Users seemed to see the green better.
+
We used NHS blue first but users didn't notice it. So we changed the arrow colour to green (our "action" colour). Users seemed to see the green better.
In follow-up tests on busy content pages, users pointed out the action links and said they found them useful.
Use the nhsuk-back-link--reverse modifier class to show white links and arrows on dark backgrounds – for example, in headers, custom components, and patterns with darker backgrounds.
{{ designExample({
group: "components",
diff --git a/app/views/design-system/components/breadcrumbs/index.njk b/app/views/design-system/components/breadcrumbs/index.njk
index 489616d54..265aac4f3 100644
--- a/app/views/design-system/components/breadcrumbs/index.njk
+++ b/app/views/design-system/components/breadcrumbs/index.njk
@@ -58,8 +58,8 @@
screen readers know what it is.
Breadcrumbs on dark backgrounds
-
Use the nhsuk-breadcrumb--reverse modifier class to show white links and arrows on dark backgrounds, for example, in headers, custom components, and patterns with darker backgrounds.
+{% endset %}
+
+{{ card({
+ type: "emergency",
+ heading: "Call 999 or go to A&E if:",
+ descriptionHtml: cardDescriptionHtml
}) }}
diff --git a/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/urgent/index.njk b/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/urgent/index.njk
index 19b3fdb4a..1c0079522 100644
--- a/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/urgent/index.njk
+++ b/app/views/design-system/patterns/help-users-decide-when-and-where-to-get-care/urgent/index.njk
@@ -1,15 +1,17 @@
{% from 'card/macro.njk' import card %}
-{{ card({
- type: "urgent",
- heading: "Ask for an urgent GP appointment or get help from NHS 111 if you have:",
- descriptionHtml: "
+{% set cardDescriptionHtml %}
pain in your eyes
changes to your vision, such as vision loss or blurred vision
We've designed our pages to meet the Web Content Accessibility Guidelines to level AA - and in some cases AAA - and we've tested them with users with access needs.
The Government Digital Service, Department of Health and Social Care and NHS England are now monitoring accessibility to WCAG 2.2.
-
-
{% include "includes/_side-nav.njk" %}
diff --git a/app/views/accessibility/new-criteria-in-wcag-2-2.njk b/app/views/accessibility/new-criteria-in-wcag-2-2.njk
index e9be9f28e..e51cdc0bf 100644
--- a/app/views/accessibility/new-criteria-in-wcag-2-2.njk
+++ b/app/views/accessibility/new-criteria-in-wcag-2-2.njk
@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "New criteria in WCAG 2.2" %}
{% set pageSection = "Accessibility" %}
{% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
{% set dateUpdated = "October 2024" %}
{% set backlog_issue_id = "512" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "accessibility/_breadcrumb.njk" %}
{% endblock %}
@@ -66,7 +66,6 @@
Consistent help
If your service provides help options such as contact details or live chat, they should be presented consistently across pages, to make sure users can find and interact with them easily. Learn more about consistent help (W3C website).
diff --git a/app/views/accessibility/product-and-delivery.njk b/app/views/accessibility/product-and-delivery.njk
index 0ee9dfe61..c08d2ed7d 100644
--- a/app/views/accessibility/product-and-delivery.njk
+++ b/app/views/accessibility/product-and-delivery.njk
@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "Product and delivery" %}
{% set pageSection = "Accessibility" %}
{% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
{% set dateUpdated = "October 2024" %}
{% set backlog_issue_id = "345" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "accessibility/_breadcrumb.njk" %}
{% endblock %}
diff --git a/app/views/accessibility/testing.njk b/app/views/accessibility/testing.njk
index a87d9cc0b..09fb8fb7a 100644
--- a/app/views/accessibility/testing.njk
+++ b/app/views/accessibility/testing.njk
@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "Testing" %}
{% set pageSection = "Accessibility" %}
{% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
{% set dateUpdated = "February 2025" %}
{% set backlog_issue_id = "350" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "accessibility/_breadcrumb.njk" %}
{% endblock %}
@@ -20,7 +20,6 @@
some success criteria and best practice for level AAA
-
{% include "./partials/make-sure-your-service-meets-wcag-2-2.njk" %}
{% include "./partials/understand-types-of-testing.njk" %}
{% include "./partials/check-orientation-is-not-locked.njk" %}
diff --git a/app/views/accessibility/user-research.njk b/app/views/accessibility/user-research.njk
index c78f871b9..47d102485 100644
--- a/app/views/accessibility/user-research.njk
+++ b/app/views/accessibility/user-research.njk
@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "User research" %}
{% set pageSection = "Accessibility" %}
{% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
{% set dateUpdated = "July 2019" %}
{% set backlog_issue_id = "346" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "accessibility/_breadcrumb.njk" %}
{% endblock %}
diff --git a/app/views/accessibility/what-all-nhs-services-need-to-do.njk b/app/views/accessibility/what-all-nhs-services-need-to-do.njk
index ca734823a..be4298f6e 100644
--- a/app/views/accessibility/what-all-nhs-services-need-to-do.njk
+++ b/app/views/accessibility/what-all-nhs-services-need-to-do.njk
@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "What all NHS services need to do about accessibility" %}
{% set pageSection = "Accessibility" %}
{% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
{% set dateUpdated = "January 2024" %}
{% set hideContact = "true" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "accessibility/_breadcrumb.njk" %}
{% endblock %}
diff --git a/app/views/community-and-contribution/backlog-of-components-and-patterns.njk b/app/views/community-and-contribution/backlog-of-components-and-patterns.njk
index 4146c521d..f4d81e680 100644
--- a/app/views/community-and-contribution/backlog-of-components-and-patterns.njk
+++ b/app/views/community-and-contribution/backlog-of-components-and-patterns.njk
@@ -1,10 +1,10 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "Backlog of components and patterns" %}
{% set pageSection = "Community and contribution" %}
{% set pageDescription = "The service manual is built on the research and experience of many digital teams in the NHS. We have a shared backlog and encourage people to contribute." %}
{% set dateUpdated = "March 2024" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "community-and-contribution/_breadcrumb.njk" %}
{% endblock %}
diff --git a/app/views/community-and-contribution/community-resources.njk b/app/views/community-and-contribution/community-resources.njk
index 26d987328..83e9727c0 100644
--- a/app/views/community-and-contribution/community-resources.njk
+++ b/app/views/community-and-contribution/community-resources.njk
@@ -1,10 +1,10 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "Community resources" %}
{% set pageSection = "Community and contribution" %}
{% set pageDescription = "Resources created and maintained by the design system community." %}
{% set dateUpdated = "August 2025" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "community-and-contribution/_breadcrumb.njk" %}
{% endblock %}
diff --git a/app/views/community-and-contribution/contribution-criteria.njk b/app/views/community-and-contribution/contribution-criteria.njk
index 1158887cd..bc92bf9f5 100644
--- a/app/views/community-and-contribution/contribution-criteria.njk
+++ b/app/views/community-and-contribution/contribution-criteria.njk
@@ -1,10 +1,10 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "Contribution criteria" %}
{% set pageSection = "Community and contribution" %}
{% set pageDescription = "Follow these criteria when proposing a new component or pattern." %}
{% set dateUpdated = "October 2019" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "community-and-contribution/_breadcrumb.njk" %}
{% endblock %}
diff --git a/app/views/community-and-contribution/develop-component-pattern.njk b/app/views/community-and-contribution/develop-component-pattern.njk
index 09528b45d..1816d8c94 100644
--- a/app/views/community-and-contribution/develop-component-pattern.njk
+++ b/app/views/community-and-contribution/develop-component-pattern.njk
@@ -1,10 +1,10 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "Develop a component or pattern" %}
{% set pageSection = "Community and contribution" %}
{% set pageDescription = "Anyone can work on something in the NHS digital service manual community backlog." %}
{% set dateUpdated = "March 2019" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "community-and-contribution/_breadcrumb.njk" %}
{% endblock %}
diff --git a/app/views/community-and-contribution/feed-back-or-share-insights.njk b/app/views/community-and-contribution/feed-back-or-share-insights.njk
index 8faab29ba..986b37a29 100644
--- a/app/views/community-and-contribution/feed-back-or-share-insights.njk
+++ b/app/views/community-and-contribution/feed-back-or-share-insights.njk
@@ -1,10 +1,10 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "Feed back or share insights" %}
{% set pageSection = "Community and contribution" %}
{% set pageDescription = "Take part in the discussion and help us improve things for everyone." %}
{% set dateUpdated = "March 2024" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "community-and-contribution/_breadcrumb.njk" %}
{% endblock %}
diff --git a/app/views/community-and-contribution/index.njk b/app/views/community-and-contribution/index.njk
index cd02f3412..bdd3ddd5f 100644
--- a/app/views/community-and-contribution/index.njk
+++ b/app/views/community-and-contribution/index.njk
@@ -1,10 +1,10 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "Community and contribution" %}
{% set pageDescription = "The NHS digital service manual is a community effort. Anyone can help improve and grow it." %}
{% set pageSection = "Community and contribution" %}
{% set landingPage = true %}
-{% extends "layouts/app-layout.njk" %}
-
{% block bodyContent %}
Find out:
diff --git a/app/views/community-and-contribution/propose-component-pattern.njk b/app/views/community-and-contribution/propose-component-pattern.njk
index 9441ae913..9cb93176d 100644
--- a/app/views/community-and-contribution/propose-component-pattern.njk
+++ b/app/views/community-and-contribution/propose-component-pattern.njk
@@ -1,10 +1,10 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "Propose a component or pattern" %}
{% set pageSection = "Community and contribution" %}
{% set pageDescription = "Anyone can propose a new thing for the NHS digital service manual." %}
{% set dateUpdated = "March 2019" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "community-and-contribution/_breadcrumb.njk" %}
{% endblock %}
diff --git a/app/views/content/a-to-z-of-nhs-health-writing.njk b/app/views/content/a-to-z-of-nhs-health-writing.njk
index 032f9fd75..d81690f5f 100644
--- a/app/views/content/a-to-z-of-nhs-health-writing.njk
+++ b/app/views/content/a-to-z-of-nhs-health-writing.njk
@@ -1,11 +1,11 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "A to Z of NHS health writing" %}
{% set pageSection = "Content guide" %}
{% set pageDescription = "Words and phrases we use to make our content about health and the NHS easy to understand." %}
{% set dateUpdated = "July 2025" %}
{% set backlog_issue_id = "318" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block head %}
{{ super() }}
@@ -219,7 +219,7 @@
You can use round brackets ( ) but do not overuse them.
-
Do not use brackets to refer to something that could either be singular or plural, like "lie down with your leg(s) on cushions". If in doubt, use the plural: legs.
+
Do not use brackets to refer to something that could either be singular or plural, like "lie down with your leg(s) on cushions". If in doubt, use the plural: legs.
Braille
Starts with a capital letter.
breast milk
@@ -626,10 +626,10 @@
kidney
We use "kidney" instead of "renal".
We may mention "renal" as well as "kidney" if our search analytics, user testing or survey feedback suggest that people will hear their doctor use "renal" or will search for it.
-
kilobytes and megabytes (KB and MB)
-
Use MB for anything over 1MB: 4MB not 4096KB.
-
Use KB for anything under 1MB: 569KB not 0.55MB.
-
Find out how we use KB and MB for document size in our guidance on links.
+
kilobytes and megabytes (KB and MB)
+
Use MB for anything over 1MB: 4MB not 4096KB.
+
Use KB for anything under 1MB: 569KB not 0.55MB.
+
Find out how we use KB and MB for document size in our guidance on links.
Use bold sparingly. Do not use italics or underlining (except for links, which are underlined by default).
Use bold in technical instructions to tell users which element (for example, a text input or button) to select. For example: Select More, then select Messages.
@@ -95,7 +94,6 @@
-
Headings
Headings help users understand what the page covers and find the information they need. Use them to break up and structure text.
Links should describe where they're taking the user. Where you can, use the same words as the title of the page you're linking to. That way, the user will know what to expect.
@@ -256,7 +253,6 @@
-
{% endblock %}
{% block asideContent %}
diff --git a/app/views/content/health-literacy.njk b/app/views/content/health-literacy.njk
index 46562834f..8db81203b 100644
--- a/app/views/content/health-literacy.njk
+++ b/app/views/content/health-literacy.njk
@@ -1,11 +1,11 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "Health literacy" %}
{% set pageSection = "Content guide" %}
{% set pageDescription = "NHS services are for everyone. But many adults in the UK have low health literacy skills. This means they struggle to read and understand medical content intended for the public." %}
{% set dateUpdated = "October 2023" %}
{% set backlog_issue_id = "319" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "content/_breadcrumb.njk" %}
{% endblock %}
diff --git a/app/views/content/how-to-write-good-questions-for-forms/consider-the-sensitivities-around-your-questions.njk b/app/views/content/how-to-write-good-questions-for-forms/consider-the-sensitivities-around-your-questions.njk
index 34c916ce6..f097fc540 100644
--- a/app/views/content/how-to-write-good-questions-for-forms/consider-the-sensitivities-around-your-questions.njk
+++ b/app/views/content/how-to-write-good-questions-for-forms/consider-the-sensitivities-around-your-questions.njk
@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "Consider the sensitivities around your questions" %}
{% set pageSection = "Content guide" %}
{% set subSection = "How to write good questions for forms" %}
@@ -5,8 +7,6 @@
{% set dateUpdated = "July 2025" %}
{% set backlog_issue_id = "327" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "content/how-to-write-good-questions-for-forms/_breadcrumb.njk" %}
{% endblock %}
@@ -75,8 +75,6 @@
Read more about sensitive topics
The sensitive topics reflect the "protected characteristics" in the Equality Act 2010. It is against the law to discriminate against anyone because of these characteristics.
You need to understand which questions your users expect first and how they group them. One way to do this is with a card sorting exercise. Test the order again when you prototype your form.
For example, do users expect to give you personal details at the start or do they want to deal with the task first and give you personal details at the end?
-
-
{% endblock %}
{% block afterContact %}
diff --git a/app/views/content/how-to-write-good-questions-for-forms/index.njk b/app/views/content/how-to-write-good-questions-for-forms/index.njk
index 8d3cae9db..b07d97df2 100644
--- a/app/views/content/how-to-write-good-questions-for-forms/index.njk
+++ b/app/views/content/how-to-write-good-questions-for-forms/index.njk
@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "How to write good questions for forms" %}
{% set pageSection = "Content guide" %}
{% set subSection = "How to write good questions for forms" %}
@@ -6,8 +8,6 @@
{% set theme = "Content guide" %}
{% set backlog_issue_id = "320" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "content/_breadcrumb.njk" %}
{% endblock %}
@@ -23,7 +23,6 @@
how to write other content for your form or transaction, for example: instructions, help text and error messages
-
What is a form?
A form is a page that asks users for information in order to give them a service. It could be a web page or a paper page.
@@ -46,8 +45,6 @@
Caroline Jarrett was our forms design subject matter expert.
-
-
{% endblock %}
{% block afterContact %}
diff --git a/app/views/content/how-to-write-good-questions-for-forms/make-sure-you-need-each-question.njk b/app/views/content/how-to-write-good-questions-for-forms/make-sure-you-need-each-question.njk
index 7a1c0f8e0..28d15bd74 100644
--- a/app/views/content/how-to-write-good-questions-for-forms/make-sure-you-need-each-question.njk
+++ b/app/views/content/how-to-write-good-questions-for-forms/make-sure-you-need-each-question.njk
@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
{% set pageTitle = "Make sure you need each question" %}
{% set pageSection = "Content guide" %}
{% set subSection = "How to write good questions for forms" %}
@@ -5,8 +7,6 @@
{% set dateUpdated = "August 2025" %}
{% set backlog_issue_id = "326" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "content/how-to-write-good-questions-for-forms/_breadcrumb.njk" %}
{% endblock %}
diff --git a/app/views/content/how-to-write-good-questions-for-forms/test-your-questions.njk b/app/views/content/how-to-write-good-questions-for-forms/test-your-questions.njk
index 17155f627..2a54b7bde 100644
--- a/app/views/content/how-to-write-good-questions-for-forms/test-your-questions.njk
+++ b/app/views/content/how-to-write-good-questions-for-forms/test-your-questions.njk
@@ -1,3 +1,4 @@
+{% extends "layouts/app-layout.njk" %}
{% set pageTitle = "Test your questions" %}
{% set pageSection = "Content guide" %}
@@ -6,8 +7,6 @@
{% set dateUpdated = "November 2019" %}
{% set backlog_issue_id = "332" %}
-{% extends "layouts/app-layout.njk" %}
-
{% block beforeContent %}
{% include "content/how-to-write-good-questions-for-forms/_breadcrumb.njk" %}
{% endblock %}
@@ -119,7 +118,6 @@
areas of the form that aren't giving you the answers you need