diff --git a/src/accessibility/wcag-2.2/index.md b/src/accessibility/wcag-2.2/index.md
index fa5f78edf3..357c6c0d63 100644
--- a/src/accessibility/wcag-2.2/index.md
+++ b/src/accessibility/wcag-2.2/index.md
@@ -55,7 +55,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
rows: [
[
{
- html: 'Back link '
+ html: 'Back link component '
},
{
html: 'Redundant entryBreadcrumbs '
+ html: 'Breadcrumbs component '
},
{
html: 'Target size (minimum)'
@@ -71,7 +71,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Button '
+ html: 'Button component '
},
{
html: 'Target size (minimum)'
@@ -79,7 +79,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Cookie banner '
+ html: 'Cookie banner component '
},
{
html: 'Focus not obscured (minimum)Error message '
+ html: 'Error message component '
},
{
html: 'Redundant entry'
@@ -95,7 +95,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'File upload '
+ html: 'File upload component '
},
{
html: 'Dragging movementsGOV.UK footer '
+ html: 'GOV.UK footer component '
},
{
html: 'Consistent help'
@@ -111,7 +111,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'GOV.UK header '
+ html: 'GOV.UK header component '
},
{
html: 'Focus not obscured (Minimum)Phase banner '
+ html: 'Phase banner component '
},
{
html: 'Focus not obscured (minimum)'
@@ -127,7 +127,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Select '
+ html: 'Select component '
},
{
html: 'Dragging movements'
@@ -135,7 +135,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Service navigation '
+ html: 'Service navigation component '
},
{
html: 'Focus not obscured (Minimum)Summary list '
+ html: 'Summary list component '
},
{
html: 'Redundant entryTag '
+ html: 'Tag component '
},
{
html: 'Dragging movements'
@@ -176,7 +176,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
rows: [
[
{
- html: 'Addresses '
+ html: 'Addresses pattern '
},
{
html: 'Redundant entry'
@@ -184,7 +184,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Bank details '
+ html: 'Bank details pattern '
},
{
html: 'Redundant entry'
@@ -192,7 +192,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Email addresses '
+ html: 'Email addresses pattern '
},
{
html: 'Redundant entry'
@@ -200,7 +200,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Equality information '
+ html: 'Equality information pattern '
},
{
html: 'Redundant entry'
@@ -208,7 +208,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Names '
+ html: 'Names pattern '
},
{
html: 'Redundant entry'
@@ -216,7 +216,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'National Insurance Numbers '
+ html: 'National Insurance Numbers pattern '
},
{
html: 'Redundant entry'
@@ -224,7 +224,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Passwords '
+ html: 'Passwords pattern '
},
{
html: 'Accessible authenticationPayment card details '
+ html: 'Payment card details pattern '
},
{
html: 'Target size (minimum)'
@@ -257,7 +257,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
rows: [
[
{
- html: 'Check a service is suitable '
+ html: 'Check a service is suitable pattern '
},
{
html: 'Redundant entry'
@@ -265,7 +265,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Check answers '
+ html: 'Check answers pattern '
},
{
html: 'Redundant entry'
@@ -273,7 +273,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Complete multiple tasks '
+ html: 'Complete multiple tasks pattern '
},
{
html: 'Dragging movementsConfirm a phone number '
+ html: 'Confirm a phone number pattern '
},
{
html: 'Consistent help'
@@ -289,7 +289,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Confirm an email address '
+ html: 'Confirm an email address pattern '
},
{
html: 'Accessible authentication'
@@ -297,7 +297,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Contact a department or service team '
+ html: 'Contact a department or service team pattern '
},
{
html: 'Consistent help'
@@ -305,7 +305,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Create accounts '
+ html: 'Create accounts pattern '
},
{
html: 'Accessible authenticationNavigate a service '
+ html: 'Navigate a service pattern '
},
{
html: 'Focus not obscured (Minimum)Recover from validation errors '
+ html: 'Recover from validation errors pattern '
},
{
html: 'Redundant entry'
@@ -346,7 +346,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
rows: [
[
{
- html: 'Page not found pages '
+ html: 'Page not found pages pattern '
},
{
html: 'Consistent help'
@@ -354,7 +354,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'Question pages '
+ html: 'Question pages pattern '
},
{
html: 'Dragging movementsService unavailable pages '
+ html: 'Service unavailable pages pattern '
},
{
html: 'Consistent help'
@@ -370,7 +370,7 @@ See an [explanation of every success criteria in WCAG 2.2](https://www.w3.org/WA
],
[
{
- html: 'There is a problem with the service pages '
+ html: 'There is a problem with the service pages pattern '
},
{
html: 'Consistent help` as the page heading. Read more about [asking multiple questions on question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).
+If you're asking more than one question on the page, do not set the contents of the `` as the page heading. Read more about [asking multiple questions on Question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).
{{ example({ group: "components", item: "character-count", example: "without-heading", html: true, nunjucks: true, open: false }) }}
diff --git a/src/components/checkboxes/index.md b/src/components/checkboxes/index.md
index 074eac6c99..58defbddaf 100644
--- a/src/components/checkboxes/index.md
+++ b/src/components/checkboxes/index.md
@@ -22,7 +22,7 @@ Use the checkboxes component when you need to help users:
## When not to use this component
-Do not use the checkboxes component if users can only choose one option from a selection. In this case, use the [radios component](/components/radios/).
+Do not use the checkboxes component if users can only choose one option from a selection. In this case, use the [Radios component](/components/radios/).
## How it works
@@ -55,7 +55,7 @@ There are 2 ways to use the checkboxes component. You can use HTML or, if you’
### If you’re asking more than one question on the page
-If you're asking more than one question on the page, do not set the contents of the `` as the page heading. Read more about [asking multiple questions on question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).
+If you're asking more than one question on the page, do not set the contents of the `` as the page heading. Read more about [asking multiple questions on Question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).
{{ example({ group: "components", item: "checkboxes", example: "without-heading", html: true, nunjucks: true, open: false, size: "m" }) }}
@@ -127,7 +127,7 @@ Error messages should be styled like this:
{{ example({ group: "components", item: "checkboxes", example: "error", html: true, nunjucks: true, open: false, size: "s" }) }}
-Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
+Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.
#### If nothing is selected and the question has options in it
diff --git a/src/components/cookie-banner/index.md b/src/components/cookie-banner/index.md
index 82a8476b61..b70e7180ea 100644
--- a/src/components/cookie-banner/index.md
+++ b/src/components/cookie-banner/index.md
@@ -46,7 +46,7 @@ The term ‘non-essential cookies’ includes:
- service workers
- any other technologies that store files on the user’s device
-This cookie banner and the [cookies page pattern](/patterns/cookies-page/) are based on the approach to getting cookie consent used on the GOV.UK website.
+This cookie banner and the [Cookies page pattern](/patterns/cookies-page/) are based on the approach to getting cookie consent used on the GOV.UK website.
This component page shows several options for using a cookie banner, based on the types of cookies you’re using in the service. We also tell you what to cover in your cookie banner, with some text examples.
@@ -66,7 +66,7 @@ Check with your organisation's privacy expert to see how data protection legisla
Show the cookie banner every time the user accesses your service until they either:
- accept or reject cookies using the buttons in the cookie banner
-- save their cookie preferences on the service’s [cookies page](/patterns/cookies-page/)
+- save their cookie preferences on [your service’s Cookies page](/patterns/cookies-page/)
Once the user has accepted or rejected cookies, the cookie banner should:
@@ -177,7 +177,7 @@ You’ll need to change the example cookie banner text if your service:
Keep the text as short as possible while making sure it’s an accurate description of how you use cookies. For example, if you use more than one ‘functional’ cookie and there’s not enough space to mention what each of them does, you could ask for permission to set cookies so ‘you can use as many of the service’s features as possible’.
-[See the cookies page for more advice on writing about cookies](/patterns/cookies-page/).
+[See the Cookies page pattern for more advice on writing about cookies](/patterns/cookies-page/).
### If you’re using essential cookies and analytics cookies
@@ -197,7 +197,7 @@ You can use this example text for a service that set:
## Creating a cookies page
-You’ll need a [cookies page](/patterns/cookies-page/) as well as a cookie banner.
+You’ll need a [Cookies page in your service](/patterns/cookies-page/) as well as a cookie banner.
## Research on this component
diff --git a/src/components/date-input/index.md b/src/components/date-input/index.md
index dd89c61d6b..acffad4d99 100644
--- a/src/components/date-input/index.md
+++ b/src/components/date-input/index.md
@@ -21,7 +21,7 @@ Use the date input component when you’re asking users for a date they’ll alr
Do not use the date input component if users are unlikely to know the exact date of the event you’re asking about.
-Read more about how to [ask users for dates](/patterns/dates/).
+Read more about how to [ask users for dates in your service](/patterns/dates/).
## How it works
@@ -69,7 +69,7 @@ If you’re highlighting just one field - either the day, month or year - only s
{{ example({ group: "components", item: "date-input", example: "error-single", html: true, nunjucks: true, open: false, size: "m" }) }}
-Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
+Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.
If there’s more than one error, show the highest priority error message. In order of priority, show error messages about:
diff --git a/src/components/details/index.md b/src/components/details/index.md
index 11ebe93761..447b2f2672 100644
--- a/src/components/details/index.md
+++ b/src/components/details/index.md
@@ -23,7 +23,7 @@ Do not use the details component to hide information that the majority of your u
## Decide between using details, accordions and tabs
-Details, [accordions](/components/accordion/), and [tabs](/components/tabs/) all hide sections of content which a user can choose to reveal.
+Details, the [Accordion component](/components/accordion/), and the [Tabs component](/components/tabs/) all hide sections of content which a user can choose to reveal.
Use the details component instead of tabs or an accordion if you only have 1 section of content.
diff --git a/src/components/error-message/index.md b/src/components/error-message/index.md
index 75ec5d0e68..62bcbf6056 100644
--- a/src/components/error-message/index.md
+++ b/src/components/error-message/index.md
@@ -25,13 +25,13 @@ This guidance is for government teams that build online services. [To find infor
]
}) }}
-Follow the [validation pattern](/patterns/validation/) and show an error message when there is a validation error. In the error message explain what went wrong and how to fix it.
+Follow the [Validation pattern](/patterns/validation/) and show an error message when there is a validation error. In the error message explain what went wrong and how to fix it.
{{ example({ group: "components", item: "error-message", example: "default", html: true, nunjucks: true, open: false, size: "m", loading: "eager" }) }}
## When to use this component
-Show an error message next to the field and in the [error summary](/components/error-summary/) when there is a validation error.
+Show an error message next to the field and in the [Error summary component](/components/error-summary/) when there is a validation error.
Use standard messages for different components.
@@ -43,9 +43,9 @@ Instead, take the user to a page that explains the problem (for example, telling
There are separate patterns for:
-- [‘there is a problem with the service’ pages](/patterns/problem-with-the-service-pages/)
-- [‘page not found’ pages](/patterns/page-not-found-pages/)
-- [‘service unavailable’ pages](/patterns/service-unavailable-pages/)
+- [There is a problem with the service pages](/patterns/problem-with-the-service-pages/)
+- [Page not found pages](/patterns/page-not-found-pages/)
+- [Service unavailable pages](/patterns/service-unavailable-pages/)
## How it works
@@ -72,7 +72,7 @@ If your error message is written in another language, you can change the prefix
{{ example({ group: "components", item: "error-message", example: "custom-prefix", html: true, nunjucks: true, open: true, displayExample: false, size: "s" }) }}
-Summarise all errors at the top of the page the user is on using an [error summary](/components/error-summary/).
+Summarise all errors at the top of the page the user is on using an [Error summary component](/components/error-summary/).
There are 2 ways to use the error message component. You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
@@ -121,7 +121,7 @@ Read the message out loud to see if it sounds like something you would say.
### Be consistent
-Use the same message next to the field and in the [error summary](/components/error-summary/) so they:
+Use the same message next to the field and in the [Error summary component](/components/error-summary/) so they:
- look, sound and mean the same
- make sense out of context
@@ -161,18 +161,18 @@ Use both instructions and descriptions, but use them consistently. For example,
Use template messages for common errors on:
-- [addresses](/patterns/addresses/#error-messages)
-- [character count](/components/character-count/#error-messages)
-- [checkboxes](/components/checkboxes/#error-messages)
-- [date input](/components/date-input/#error-messages)
-- [email address](/patterns/email-addresses/#error-messages)
-- [file upload](/components/file-upload/#error-messages)
-- [names](/patterns/names/#error-messages)
-- [National Insurance numbers](/patterns/national-insurance-numbers/#error-messages)
-- [radios](/components/radios/#error-messages)
-- [phone numbers](/patterns/phone-numbers/#error-messages)
-- [text input](/components/text-input/#error-messages)
-- [textarea](/components/textarea/#error-messages)
+- [Addresses pattern](/patterns/addresses/#error-messages)
+- [Character count component](/components/character-count/#error-messages)
+- [Checkboxes component](/components/checkboxes/#error-messages)
+- [Date input component](/components/date-input/#error-messages)
+- [Email address pattern](/patterns/email-addresses/#error-messages)
+- [File upload component](/components/file-upload/#error-messages)
+- [Names pattern](/patterns/names/#error-messages)
+- [National Insurance numbers pattern](/patterns/national-insurance-numbers/#error-messages)
+- [Radios component](/components/radios/#error-messages)
+- [Phone numbers pattern](/patterns/phone-numbers/#error-messages)
+- [Text input component](/components/text-input/#error-messages)
+- [Textarea component](/components/textarea/#error-messages)
### Track errors
diff --git a/src/components/error-summary/index.md b/src/components/error-summary/index.md
index d71f57e50e..7786bf3328 100644
--- a/src/components/error-summary/index.md
+++ b/src/components/error-summary/index.md
@@ -11,7 +11,7 @@ layout: layout-pane.njk
Use this component at the top of a page to summarise any errors a user has made.
-When a user makes an error, you must show both an error summary and an [error message](/components/error-message/) next to each answer that contains an error.
+When a user makes an error, you must show both an error summary and an [Error message component](/components/error-message/) next to each answer that contains an error.
{{ example({ group: "components", item: "error-summary", example: "default", html: true, nunjucks: true, open: false, size: "s", loading: "eager" }) }}
@@ -28,9 +28,9 @@ You must:
- link to each of the answers that have validation errors
- make sure the error messages in the error summary are worded the same as those which appear next to the inputs with errors
-As well as showing an error summary, follow the [validation pattern](/patterns/validation/) - for example, by adding ‘Error: ’ to the beginning of the page `` so screen readers read it out as soon as possible.
+As well as showing an error summary, follow the [Validation pattern](/patterns/validation/) - for example, by adding ‘Error: ’ to the beginning of the page `<title>` so screen readers read it out as soon as possible.
-And make your [error messages](/components/error-message/#be-clear-and-concise) clear and concise.
+And [make your error messages clear and concise](/components/error-message/#be-clear-and-concise).
There are 2 ways to use the error summary component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro.
diff --git a/src/components/exit-this-page/index.md b/src/components/exit-this-page/index.md
index fdbd51d0f5..f667887128 100644
--- a/src/components/exit-this-page/index.md
+++ b/src/components/exit-this-page/index.md
@@ -11,7 +11,7 @@ layout: layout-pane.njk
Give users a way to quickly and safely exit a service, website or application.
-For service journeys, you must use this component with the pattern to help a user [Exit a page quickly](/patterns/exit-a-page-quickly/).
+For service journeys, you must use this component with the [Exit a page quickly pattern](/patterns/exit-a-page-quickly/).
{{ example({ group: "components", item: "exit-this-page", example: "default", html: true, nunjucks: true, open: false, size: "s", loading: "eager" }) }}
@@ -33,9 +33,9 @@ You can also use this component for standalone content pages, such as dashboards
## When not to use this component
-Do not use this component if the service or content is unlikely to put a user at risk. See the [Exit a page quickly](/patterns/exit-a-page-quickly/) pattern for examples of at-risk and sensitive topics.
+Do not use this component if the service or content is unlikely to put a user at risk. See the [Exit a page quickly pattern](/patterns/exit-a-page-quickly/) for examples of at-risk and sensitive topics.
-The 'Exit this page' component is a [button component](/components/button/) that has been marked up with addtional CSS and JavaScript functionality, to make it work in a specific way.
+The 'Exit this page' component is a [Button component](/components/button/) that has been marked up with addtional CSS and JavaScript functionality, to make it work in a specific way.
Keep in mind that seeing this component might discourage certain users from using your service. If the user does not identify themselves as being at risk, they might see the button on a service and decide it’s not relevant to them.
diff --git a/src/components/fieldset/index.md b/src/components/fieldset/index.md
index 11afdcfa5e..1ebc0b895f 100644
--- a/src/components/fieldset/index.md
+++ b/src/components/fieldset/index.md
@@ -13,11 +13,11 @@ Use the fieldset component to group related form inputs.
## When to use this component
-Use the fieldset component when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single fieldset when [asking for an address](/patterns/addresses/).
+Use the fieldset component when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single fieldset when [asking for an address in your service](/patterns/addresses/).
{{ example({ group: "components", item: "fieldset", example: "address-group", html: true, nunjucks: true, open: false, size: "xl", loading: "eager" }) }}
-If you’re using the examples or macros for [radios](/components/radios/), [checkboxes](/components/checkboxes/) or [date input](/components/date-input/), the fieldset will already be included.
+If you’re using the examples or macros for a [Radios component](/components/radios/), [Checkboxes component](/components/checkboxes/) or [Date input component](/components/date-input/), the fieldset will already be included.
## How it works
@@ -29,6 +29,6 @@ Read more about [why and how to set legends as headings](/get-started/labels-leg
{{ example({ group: "components", item: "fieldset", example: "default", html: true, nunjucks: true, open: false }) }}
-On [question pages](/patterns/question-pages/) containing a group of inputs, including the question as the legend helps users of screen readers to understand that the inputs are all related to that question.
+On [Question pages in your service](/patterns/question-pages/) containing a group of inputs, including the question as the legend helps users of screen readers to understand that the inputs are all related to that question.
Include general help text in the legend if it would help the user fill in the form, and you cannot write it as [hint text](/components/text-input/#hint-text). However, try to keep it as short as possible.
diff --git a/src/components/file-upload/index.md b/src/components/file-upload/index.md
index dbf2186158..7f4d56786e 100644
--- a/src/components/file-upload/index.md
+++ b/src/components/file-upload/index.md
@@ -66,7 +66,7 @@ Error messages should be styled like this:
{{ example({ group: "components", item: "file-upload", example: "error", html: true, nunjucks: true, open: false, size: "m" }) }}
-Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
+Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.
#### If no file has been selected
diff --git a/src/components/footer/index.md b/src/components/footer/index.md
index 8e566952d3..81cf29d45a 100644
--- a/src/components/footer/index.md
+++ b/src/components/footer/index.md
@@ -51,9 +51,9 @@ Make it clear whether content is available for re-use - and if it is, under what
You can add links to:
-- [privacy notice](https://www.gov.uk/service-manual/design/collecting-personal-information-from-users)
-- [accessibility statement](https://www.gov.uk/service-manual/helping-people-to-use-your-service/publishing-information-about-your-services-accessibility)
-- [cookies page](/patterns/cookies-page/)
+- [your service's privacy notice](https://www.gov.uk/service-manual/design/collecting-personal-information-from-users)
+- [your service's accessibility statement](https://www.gov.uk/service-manual/helping-people-to-use-your-service/publishing-information-about-your-services-accessibility)
+- [your service's Cookies page](/patterns/cookies-page/)
- terms and conditions
- other language options
- help content
diff --git a/src/components/header/index.md b/src/components/header/index.md
index e89a593465..4527ded0f5 100644
--- a/src/components/header/index.md
+++ b/src/components/header/index.md
@@ -51,11 +51,11 @@ You can still build from this component, but you’ll need to [make some changes
## How it works
-Together, the GOV.UK header and [Service navigation](/components/service-navigation/) components ensure users get a consistent experience on GOV.UK.
+Together, the GOV.UK header and [Service navigation component](/components/service-navigation/) components ensure users get a consistent experience on GOV.UK.
This also assures users that they’re in the right place to use your service and to understand that GOV.UK functions as one website.
-For guidance on how to plan your header and navigation, see the [Help users navigate a service](/patterns/navigate-a-service) pattern.
+For guidance on how to plan your header and navigation, see the [Help users navigate a service pattern](/patterns/navigate-a-service).
### Default GOV.UK header
@@ -72,15 +72,15 @@ The GOV.UK header component was originally released with 2 variants:
- with service name
- with service name and navigation
-In August 2024, we introduced a separate [Service navigation](/components/service-navigation) component. This is to better help users understand that they’re using your service and let them navigate around your service.
+In August 2024, we introduced a separate [Service navigation component](/components/service-navigation) component. This is to better help users understand that they’re using your service and let them navigate around your service.
We recommend using the Service navigation component to show your service name and navigation links instead of the GOV.UK header, and to start updating existing services.
-See the [Help users navigate a service](/patterns/navigate-a-service) pattern for more guidance and our plans to phase out these 2 variants.
+See the [Help users navigate a service pattern](/patterns/navigate-a-service) for more guidance and our plans to phase out these 2 variants.
#### GOV.UK header with service name
-Avoid using the 'GOV.UK header with service name' where possible, and use the [Service navigation](/components/service-navigation) component to show your service name instead.
+Avoid using the 'GOV.UK header with service name' where possible, and use the [Service navigation component](/components/service-navigation) component to show your service name instead.
{{ example({ group: "components", item: "header", example: "with-service-name", html: true, nunjucks: true, open: false }) }}
@@ -108,4 +108,4 @@ GOV.UK One Login maintains their own header on the [Let users navigate to their
## Research on this component
-See the [research section in the Help users navigate a service](/patterns/navigate-a-service/#research-on-this-pattern) pattern for a summary of our research on the GOV.UK header and navigation, and how you can share your feedback with us.
+See the [research section in the Help users navigate a service pattern](/patterns/navigate-a-service/#research-on-this-pattern) for a summary of our research on the GOV.UK header and navigation, and how you can share your feedback with us.
diff --git a/src/components/index.md b/src/components/index.md
index 81837039e3..7afaeec72d 100644
--- a/src/components/index.md
+++ b/src/components/index.md
@@ -6,7 +6,7 @@ showSubNav: true
Components are reusable parts of a user interface. Using pre-built, core elements allows government teams to build consistent services.
-You can also use the individual components in [different patterns](/patterns/) and contexts. For example, you can use the [text input component](/components/text-input/) to ask for an email address, a National Insurance number or someone’s name.
+You can also use the individual components in [different patterns](/patterns/) and contexts. For example, you can use the [Text input component](/components/text-input/) to ask for an email address, a National Insurance number or someone’s name.
Each component in the GOV.UK Design System has guidance on its use and coded examples. If you're using the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), or have included [GOV.UK Frontend](https://frontend.design-system.service.gov.uk/) in your build, coded examples will render the same as in the Design System.
diff --git a/src/components/inset-text/index.md b/src/components/inset-text/index.md
index b174ae0f2b..8a2c30320d 100644
--- a/src/components/inset-text/index.md
+++ b/src/components/inset-text/index.md
@@ -23,7 +23,7 @@ Use the inset text component to differentiate a block of text from the content t
Some users do not notice inset text if it’s used on complex pages or near to other visually prominent elements. For this reason, avoid using inset text as a way of highlighting very important information that users need to see.
-If you need to draw attention to very important content, like legal information, use the [warning text component](/components/warning-text/) instead.
+If you need to draw attention to very important content, like legal information, use the [Warning text component](/components/warning-text/) instead.
## How it works
diff --git a/src/components/notification-banner/index.md b/src/components/notification-banner/index.md
index 9c8b249691..595a5e0cf4 100644
--- a/src/components/notification-banner/index.md
+++ b/src/components/notification-banner/index.md
@@ -25,12 +25,12 @@ A notification banner lets you tell the user about something that’s not direct
Use notification banners sparingly. There’s [evidence that people often miss them](https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/), and using them too often is likely to make this problem worse.
-If the information is directly relevant to the thing the user is doing on that page, put the information in the main page content instead. Use [inset text](/components/inset-text/) or [warning text](/components/warning-text/) if it needs to stand out.
+If the information is directly relevant to the thing the user is doing on that page, put the information in the main page content instead. Use an [Inset text component](/components/inset-text/) or [Warning text component](/components/warning-text/) if it needs to stand out.
Do not:
-- use a notification banner to tell the user about validation errors - use an [error message](/components/error-message/) and [error summary](/components/error-summary/) instead
-- show a notification banner and an [error summary](/components/error-summary/) on the same page - just show the error summary
+- use a notification banner to tell the user about validation errors - use an [Error message component](/components/error-message/) and [Error summary component](/components/error-summary/) instead
+- show a notification banner and an [Error summary component](/components/error-summary/) on the same page - just show the error summary
## How it works
@@ -71,9 +71,9 @@ Use a ‘neutral’ notification banner if the user needs to know about somethin
## Reacting to something the user has done
-You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished using the service, so it does not make sense to use a [confirmation page](/patterns/confirmation-pages/).
+You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished using the service, so it does not make sense to use a [Confirmation page in your service](/patterns/confirmation-pages/).
-Using a notification banner is unlikely to be the right approach in a linear service - for example, a service that lets the user register or apply for a thing. For a linear service, it will usually make sense to stick to the [‘one thing per page’ approach](https://www.gov.uk/service-manual/design/form-structure). Do not use a notification banner to tell users that they’ve finished using a linear service. Use a [confirmation page](/patterns/confirmation-pages/) instead.
+Using a notification banner is unlikely to be the right approach in a linear service - for example, a service that lets the user register or apply for a thing. For a linear service, it will usually make sense to stick to the [‘one thing per page’ approach](https://www.gov.uk/service-manual/design/form-structure). Do not use a notification banner to tell users that they’ve finished using a linear service. Use a [Confirmation page in your service](/patterns/confirmation-pages/) instead.
Use the green version of the notification banner to confirm that something they’re expecting to happen has happened.
diff --git a/src/components/pagination/index.md b/src/components/pagination/index.md
index 30b83e922c..017fcf5b7f 100644
--- a/src/components/pagination/index.md
+++ b/src/components/pagination/index.md
@@ -26,7 +26,7 @@ Only break up content onto separate pages if it improves the performance or usab
Avoid using the 'infinite scroll' technique to automatically load content when the user approaches the bottom of the page. This causes problems for keyboard users.
-Do not use this Pagination component for linear journeys – for example, where you’re asking the user to complete a form. Instead, use the [Button component](/components/button/) (usually a 'Continue' button) to let the user move to the next page – and a [Back link](/components/back-link/) to let them move to the previous page.
+Do not use this Pagination component for linear journeys – for example, where you’re asking the user to complete a form. Instead, use the [Button component](/components/button/) (usually a 'Continue' button) to let the user move to the next page – and a [Back link component](/components/back-link/) to let them move to the previous page.
## How it works
diff --git a/src/components/panel/index.md b/src/components/panel/index.md
index 66829b3935..a38e369e5c 100644
--- a/src/components/panel/index.md
+++ b/src/components/panel/index.md
@@ -16,7 +16,7 @@ The panel component is a visible container used on confirmation or results pages
Use the panel component to display important information when a transaction has been completed.
-In most cases, the panel component is used on [confirmation pages](/patterns/confirmation-pages/), to tell the user they have successfully completed the transaction.
+In most cases, the panel component is used on [Confirmation pages in your service](/patterns/confirmation-pages/), to tell the user they have successfully completed the transaction.
## When not to use this component
diff --git a/src/components/password-input/index.md b/src/components/password-input/index.md
index e87df0fa35..b3b51c4dd8 100644
--- a/src/components/password-input/index.md
+++ b/src/components/password-input/index.md
@@ -39,19 +39,19 @@ Help users to create and enter passwords.
Use this component whenever you need users to create or enter a password.
-Before using this component, you should also read the guidance on [asking users for passwords](/patterns/passwords/) and [creating user accounts](/patterns/create-accounts/).
+Before using this component, you should also read the guidance on [asking users for passwords in your service](/patterns/passwords/) and [creating user accounts in your service](/patterns/create-accounts/).
## When not to use this component
Do not use this component to ask for any information other than a password.
-Use [Text input](/components/text-input/) to ask for other security information, such as:
+Use a [Text input component](/components/text-input/) to ask for other security information, such as:
- multi-factor authentication codes
- answers to security questions
- other personally identifiable information
-Also see the [Confirm a phone number](/patterns/confirm-a-phone-number/) pattern.
+Also see the [Confirm a phone number pattern](/patterns/confirm-a-phone-number/).
## How it works
@@ -67,7 +67,7 @@ If the user enters their account details incorrectly, do not reveal whether they
Revealing the source of the error can help fraudsters break into people’s accounts.
-See how to handle incorrect login attempts and help users who forget their password in the [Ask users for passwords](/patterns/passwords/) pattern.
+See how to handle incorrect login attempts and help users who forget their password in the [Ask users for passwords pattern](/patterns/passwords/).
### Showing and hiding passwords
@@ -129,7 +129,7 @@ This can be useful for users, such as to save a password that the browser has su
### Avoid restricting the user's input
-See the [Ask users for Passwords](/patterns/passwords/) pattern to see how to help users choose strong passwords.
+See the [Ask users for passwords pattern](/patterns/passwords/) to see how to help users choose strong passwords.
Support all the characters users may need to enter a password, including numbers and symbols.
@@ -141,7 +141,7 @@ Any restrictions must be identical wherever the user creates or enters a passwor
Users will not get any feedback when they’ve reached the `maxlength` and their text input has been truncated. This happens when a user has pasted text from elsewhere or it’s been autofilled by a password manager.
-If you must restrict the length of a password, show an error message instead using the [validation](/patterns/validation/) pattern.
+If you must restrict the length of a password, show an error message instead using the [Validation pattern](/patterns/validation/).
### Do not spellcheck or autocapitalise the user's input
diff --git a/src/components/phase-banner/index.md b/src/components/phase-banner/index.md
index 4d4e788772..474c955f95 100644
--- a/src/components/phase-banner/index.md
+++ b/src/components/phase-banner/index.md
@@ -39,8 +39,8 @@ Use an alpha banner when your service is in alpha, and a beta banner if your ser
Show the Phase banner directly under either:
-- the [Service navigation](/components/service-navigation/) component
-- the [GOV.UK header](/components/header/) and its blue colour bar (if your service does not use the Service navigation component)
+- the [Service navigation component](/components/service-navigation/)
+- the [GOV.UK header component](/components/header/) and its blue colour bar (if your service does not use the Service navigation component)
Phase banners are shown across all pages of a service, so users should understand it as a service-level message.
diff --git a/src/components/radios/index.md b/src/components/radios/index.md
index 7898069c83..4e334e59de 100644
--- a/src/components/radios/index.md
+++ b/src/components/radios/index.md
@@ -17,7 +17,7 @@ Use the radios component when users can only select one option from a list.
## When not to use this component
-Do not use the radios component if users might need to select more than one option. In this case, you should use the [checkboxes](/components/checkboxes/) component instead.
+Do not use the radios component if users might need to select more than one option. In this case, you should use the [Checkboxes component](/components/checkboxes/) component instead.
## How it works
@@ -54,7 +54,7 @@ There are 2 ways to use the radios component. You can use HTML or, if you are us
### If you’re asking more than one question on the page
-If you're asking more than one question on the page, do not set the contents of the `<legend>` as the page heading. Read more about [asking multiple questions on question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).
+If you're asking more than one question on the page, do not set the contents of the `<legend>` as the page heading. Read more about [asking multiple questions on Question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).
{{ example({ group: "components", item: "radios", example: "without-heading", html: true, nunjucks: true, open: false, size: "s" }) }}
@@ -132,7 +132,7 @@ Error messages should be styled like this:
{{ example({ group: "components", item: "radios", example: "error", html: true, nunjucks: true, open: false, size: "s" }) }}
-Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
+Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.
#### If it’s a ‘yes’ or ‘no’ question
@@ -148,7 +148,7 @@ Say ‘Select [whatever it is]’. For example, ‘Select the day of the week yo
#### If it's a conditionally revealed question
-Include an [error message](/components/error-message/) that is clearly related to the initial question.
+Include an [Error message component](/components/error-message/) that is clearly related to the initial question.
{{ example({ group: "components", item: "radios", example: "conditional-reveal-error", html: true, nunjucks: true, open: false, size: "s" }) }}
diff --git a/src/components/select/index.md b/src/components/select/index.md
index c1ad9adbaa..55552f381e 100644
--- a/src/components/select/index.md
+++ b/src/components/select/index.md
@@ -33,7 +33,7 @@ The select component should only be used as a last resort in public-facing servi
The select component allows users to choose an option from a long list. Before using the select component, try asking users questions which will allow you to present them with fewer options.
-Asking questions means you’re less likely to need to use the select component, and can consider using a different solution, such as [radios](/components/radios/).
+Asking questions means you’re less likely to need to use the select component, and can consider using a different solution, such as a [Radios component](/components/radios/).
## How it works
diff --git a/src/components/service-navigation/index.md b/src/components/service-navigation/index.md
index 790823731d..6be5d4abd6 100644
--- a/src/components/service-navigation/index.md
+++ b/src/components/service-navigation/index.md
@@ -35,15 +35,15 @@ Service navigation helps users understand that they’re using your service and
Use the Service navigation to help users understand that they’re using your service.
-To decide when to use navigation links in your service, see the ‘[Help users to navigate a service](/patterns/navigate-a-service/)’ pattern.
+To decide when to use navigation links in your service, see the [Help users to navigate a service pattern](/patterns/navigate-a-service/).
## How it works
-Together, the [GOV.UK header](/components/header/) and Service navigation components ensure users get a consistent experience on GOV.UK.
+Together, the [GOV.UK header component](/components/header/) and Service navigation component ensure users get a consistent experience on GOV.UK.
This also assures users that they’re in the right place to use your service and to understand that GOV.UK functions as one website.
-For guidance on how to plan your header and navigation, see the [Help users navigate a service](/patterns/navigate-a-service/) pattern.
+For guidance on how to plan your header and navigation, see the [Help users navigate a service pattern](/patterns/navigate-a-service/).
### Change the blue colour bar under the GOV.UK header to full width
@@ -87,7 +87,7 @@ The Service navigation includes the option to use ‘slots’ to insert custom H
You must provide your own styles and JavaScript code for the content within a slot, particularly if you’re not using an existing component. You’ll need to decide on the most appropriate layout and positioning.
-The [Help users to navigate a service](/patterns/navigate-a-service) pattern includes some guidance on ‘Adding other header and navigation elements’.
+The [Help users to navigate a service pattern](/patterns/navigate-a-service) includes some guidance on ‘Adding other header and navigation elements’.
### Ensure the ‘aria-label’ is accurate for users of assistive technology
@@ -103,4 +103,4 @@ You’ll need to ensure that slot content still works as intended after each upd
## Research on this component
-See the [research section in the Help users navigate a service](/patterns/navigate-a-service/#research-on-this-pattern) pattern for a summary of our research on the GOV.UK header and Service navigation, and how you can share your feedback with us.
+See the [research section in the Help users navigate a service pattern](/patterns/navigate-a-service/#research-on-this-pattern) for a summary of our research on the GOV.UK header and Service navigation, and how you can share your feedback with us.
diff --git a/src/components/skip-link/index.md b/src/components/skip-link/index.md
index d7fcbe4e48..a43cf07b30 100644
--- a/src/components/skip-link/index.md
+++ b/src/components/skip-link/index.md
@@ -17,7 +17,7 @@ If you use the page template, you'll also get the skip link without having to ad
## When to use this component
-All GOV.UK pages must include a skip link. Usually, you should place the skip link immediately after the opening `<body>` tag. However, if you're using a [cookie banner](/components/cookie-banner/), place the skip link immediately after the cookie banner.
+All GOV.UK pages must include a skip link. Usually, you should place the skip link immediately after the opening `<body>` tag. However, if you're using a [Cookie banner component](/components/cookie-banner/), place the skip link immediately after the cookie banner.
Some automated accessibility testing tools may warn that the skip link element is not inside a landmark. This warning does not apply to skip links, so you can ignore it. Do not wrap the skip link in a `<nav>` region, or move it inside the header.
diff --git a/src/components/summary-list/index.md b/src/components/summary-list/index.md
index 4087850e4b..97ca83f690 100644
--- a/src/components/summary-list/index.md
+++ b/src/components/summary-list/index.md
@@ -35,7 +35,7 @@ Use a summary list to summarise information, for example, a user’s responses a
Use a summary list to show information as a list of key facts.
-You can use it to display metadata like ‘Last updated’ with a date like ‘22 June 2018’, or to summarise a user’s responses at the end of a form like the [check answers](/patterns/check-answers/) pattern.
+You can use it to display metadata like ‘Last updated’ with a date like ‘22 June 2018’, or to summarise a user’s responses at the end of a form like the [Check answers pattern](/patterns/check-answers/).
[Summary cards](#summary-cards) are a variant within this component. You can use summary cards to show multiple summary lists that describe the same type of thing, such as people. You can also add card actions that apply to the entire summary list.
@@ -43,7 +43,7 @@ You can use it to display metadata like ‘Last updated’ with a date like ‘2
The summary list uses the description list (`<dl>`) HTML element, so only use it to present information that has a key and at least one value.
-Do not use it for tabular data or a simple list of information or tasks, like a [task list](/components/task-list/). For those use a `<table>`, `<ul>` or `<ol>`.
+Do not use it for tabular data or a simple list of information or tasks, like a [Task list component](/components/task-list/). For those use a `<table>`, `<ul>` or `<ol>`.
## How it works
diff --git a/src/components/tabs/index.md b/src/components/tabs/index.md
index 1982108d56..baf3de01c6 100644
--- a/src/components/tabs/index.md
+++ b/src/components/tabs/index.md
@@ -43,7 +43,7 @@ Test your content without tabs first. Consider if it’s better to:
## Decide between using tabs, accordion and details
-Tabs, [accordions](/components/accordion/), and [details](/components/details/) all hide sections of content which a user can choose to reveal.
+Tabs, the [Accordion component](/components/accordion/), and the [Details component](/components/details/) all hide sections of content which a user can choose to reveal.
If you decide to use one of these components, consider if:
diff --git a/src/components/tag/index.md b/src/components/tag/index.md
index a2a2e73938..a9986c46d6 100644
--- a/src/components/tag/index.md
+++ b/src/components/tag/index.md
@@ -29,7 +29,7 @@ Use the tag component to show users the status of something.
## When to use this component
-Use the tag component when it’s possible for something to have more than one status and it’s useful for the user to know about that status. For example, you can use a tag to show whether an item in a [task list](/components/task-list/) has been ‘completed’.
+Use the tag component when it’s possible for something to have more than one status and it’s useful for the user to know about that status. For example, you can use a tag to show whether an item in a [Task list component](/components/task-list/) has been ‘completed’.
## How it works
@@ -46,7 +46,7 @@ Do not use tags to create links, buttons or other interactive elements, as users
Sometimes a single status is enough. For example if you need to tell users which parts of an application they’ve finished and which they have not, you may only need a ‘Completed’ tag. Because the user understands that if something does not have a tag, that means it’s incomplete.
-The [complete multiple tasks pattern](/patterns/complete-multiple-tasks/) has an example of how to show one status using tags.
+The [Complete multiple tasks pattern](/patterns/complete-multiple-tasks/) has an example of how to show one status using tags.
Or it can make sense to have two statuses. For example you may find that there’s a need to have one tag for ‘Active’ users and one for ‘Inactive’ users.
diff --git a/src/components/task-list/index.md b/src/components/task-list/index.md
index ed8947f3cc..aaf569ad3c 100644
--- a/src/components/task-list/index.md
+++ b/src/components/task-list/index.md
@@ -28,7 +28,7 @@ Try to simplify the service before you use a task list. If you’re able to redu
Do not use the task list for a long service that needs to be completed in a specific order. If it needs to be completed over multiple sessions, consider allowing users to save their progress, and then to continue where they left off when they return. Use the start page to explain what users will be expected to do during the service.
-The task list should not be used as a way of showing users their answers. For this, you should use a [summary list](/components/summary-list/) instead.
+The task list should not be used as a way of showing users their answers. For this, you should use a [Summary list component](/components/summary-list/) instead.
## How it works
@@ -42,7 +42,7 @@ The status alongside the task indicates whether they can start it. Users can sel
Users can only move on from the task list when all tasks are shown as ‘Completed’.
-Read the [complete multiple tasks pattern guidance](/patterns/complete-multiple-tasks/) for more information on how to use the task list within a service.
+Read the [Complete multiple tasks pattern guidance](/patterns/complete-multiple-tasks/) for more information on how to use the task list within a service.
### Tasks
@@ -70,13 +70,13 @@ Do not include links within the hint text. The whole task row links users to the
If there are a lot of tasks to complete, you might find that grouping them makes it easier for users to understand and plan what they need to do. Tasks can be grouped into separate task lists on a page. Give each task list a short heading that clearly explains the grouping.
-Read the [complete multiple tasks pattern guidance](/patterns/complete-multiple-tasks/) for more information on grouping tasks.
+Read the [Complete multiple tasks pattern guidance](/patterns/complete-multiple-tasks/) for more information on grouping tasks.
### Statuses
Statuses use colour and a short descriptor to give users a quick overview of how much of the task list they have completed, and how much is left to do.
-Read the [complete multiple tasks pattern guidance](/patterns/complete-multiple-tasks/) for more information on status colours and text.
+Read the [Complete multiple tasks pattern guidance](/patterns/complete-multiple-tasks/) for more information on status colours and text.
## Research on this component
diff --git a/src/components/text-input/index.md b/src/components/text-input/index.md
index 285400a663..55c48c496c 100644
--- a/src/components/text-input/index.md
+++ b/src/components/text-input/index.md
@@ -17,7 +17,7 @@ Use the text input component when you need to let users enter text that’s no l
## When not to use this component
-Do not use the text input component if you need to let users enter longer answers that might span multiple lines. In this case, you should use the [textarea](/components/textarea/) component.
+Do not use the text input component if you need to let users enter longer answers that might span multiple lines. In this case, you should use the [Textarea component](/components/textarea/).
## How it works
@@ -45,7 +45,7 @@ There are 2 ways to use the text input component. You can use HTML or, if you’
### If you’re asking more than one question on the page
-If you're asking more than one question on the page, do not set the contents of the `<label>` as the page heading. Read more about [asking multiple questions on question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).
+If you're asking more than one question on the page, do not set the contents of the `<label>` as the page heading. Read more about [asking multiple questions on Question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).
{{ example({ group: "components", item: "text-input", example: "without-heading", html: true, nunjucks: true, open: false, size: "s" }) }}
@@ -105,10 +105,10 @@ See how to do this by opening the HTML and Nunjucks tabs in this example:
{{ example({ group: "components", item: "text-input", example: "number-input", html: true, nunjucks: true, open: false, size: "m" }) }}
-There is specific guidance on how to ask for:
+There is specific guidance on:
-- [dates](/patterns/dates/)
-- [phone numbers](/patterns/phone-numbers/)
+- [how to ask for dates](/patterns/dates/)
+- [how to ask for phone numbers](/patterns/phone-numbers/)
#### Asking for decimal numbers
@@ -130,11 +130,11 @@ You do not need to do this for memorable information, such as phone numbers and
{{ example({ group: "components", item: "text-input", example: "code-sequence", html: true, nunjucks: true, open: false, size: "m" }) }}
-There is specific guidance on how to:
+There is specific guidance on:
-- [ask for bank account details](/patterns/bank-details/)
-- [ask for National Insurance numbers](/patterns/national-insurance-numbers/)
-- [confirm a phone number](/patterns/confirm-a-phone-number/)
+- [how to ask for bank account details](/patterns/bank-details/)
+- [how to ask for National Insurance numbers](/patterns/national-insurance-numbers/)
+- [how to confirm a phone number](/patterns/confirm-a-phone-number/)
### Prefixes and suffixes
@@ -182,7 +182,7 @@ A restrictive maximum length can stop users from formatting information in their
Some assistive technologies do not tell users if an input has a `maxlength` set or if the user has passed the limit. Voice control software may insert additional spaces into the input.
-If you must enforce a maximum length for technical reasons, inform the user of the limit in the hint, but allow them to provide more information. Only return an error if the value is longer than allowed after normalisation. For longer values, consider using the [character count component](/components/character-count/) instead.
+If you must enforce a maximum length for technical reasons, inform the user of the limit in the hint, but allow them to provide more information. Only return an error if the value is longer than allowed after normalisation. For longer values, consider using the [Character count component](/components/character-count/) instead.
### How and when to spellcheck a user’s input
@@ -206,7 +206,7 @@ Error messages should be styled like this:
{{ example({ group: "components", item: "text-input", example: "input-prefix-suffix-error", html: true, nunjucks: true, closed: true, size: "s" }) }}
-Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
+Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.
#### If the input is empty
diff --git a/src/components/textarea/index.md b/src/components/textarea/index.md
index 6066b4a2ca..fda9e0e4dc 100644
--- a/src/components/textarea/index.md
+++ b/src/components/textarea/index.md
@@ -17,11 +17,11 @@ Use the textarea component when you need to let users enter an amount of text th
## When not to use this component
-Users can find open-ended questions difficult to answer. It might be better to break up one complex question into a series of simple ones, for example where users can select from options using [radios](/components/radios/).
+Users can find open-ended questions difficult to answer. It might be better to break up one complex question into a series of simple ones, for example where users can select from options using a [Radios component](/components/radios/).
### If you need to ask an open question
-Do not use the textarea component if you need to let users enter shorter answers no longer than a single line, such as a phone number or name. In this case, you should use the [text input](/components/text-input/) component.
+Do not use the textarea component if you need to let users enter shorter answers no longer than a single line, such as a phone number or name. In this case, you should use the [Text input component](/components/text-input/).
## How it works
@@ -45,13 +45,13 @@ Users will often need to copy and paste information into a textarea, so do not s
### If you’re asking more than one question on the page
-If you're asking more than one question on the page, do not set the contents of the `<label>` as the page heading. Read more about [asking multiple questions on question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).
+If you're asking more than one question on the page, do not set the contents of the `<label>` as the page heading. Read more about [asking multiple questions on Question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).
{{ example({ group: "components", item: "textarea", example: "without-heading", html: true, nunjucks: true, open: false, size: "l" }) }}
### Limiting the number of characters
-If there’s a good reason to limit the number of characters users can enter, you can use the [character count](/components/character-count/) component.
+If there’s a good reason to limit the number of characters users can enter, you can use the [Character count component](/components/character-count/).
### Error messages
@@ -59,7 +59,7 @@ Error messages should be styled like this:
{{ example({ group: "components", item: "textarea", example: "error", html: true, nunjucks: true, open: false, size: "l" }) }}
-Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
+Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.
#### If the input is empty
diff --git a/src/get-started/extending-and-modifying-components/index.md b/src/get-started/extending-and-modifying-components/index.md
index 271de97a21..a1535e530c 100644
--- a/src/get-started/extending-and-modifying-components/index.md
+++ b/src/get-started/extending-and-modifying-components/index.md
@@ -139,7 +139,7 @@ When you do this you’ll need to rename all [prefixes][prefix] that include `go
Doing this removes the possibility of any updates breaking your service. However, you will not receive any future updates from the original component.
-For example, a large modification of an existing component is the [step by step navigation](/patterns/step-by-step-navigation/) which began as a small modification to the [accordion component](/components/accordion/). The step by step navigation had so many changes it was eventually forked into a separate component.
+For example, a large modification of an existing component is the [Step by step navigation pattern](/patterns/step-by-step-navigation/) which began as a small modification to the [Accordion component](/components/accordion/). The step by step navigation had so many changes it was eventually forked into a separate component.
## Contributing back
diff --git a/src/get-started/focus-states/index.md b/src/get-started/focus-states/index.md
index 0ce664b8c9..edb2baa913 100644
--- a/src/get-started/focus-states/index.md
+++ b/src/get-started/focus-states/index.md
@@ -19,7 +19,7 @@ When links are focused, they have a yellow background with a black bottom border
-Other components and elements that look like links use the link focus state style. For example, the controls on the [accordion](/components/accordion/) and [details](/components/details/) components.
+Other components and elements that look like links use the link focus state style. For example, the controls on the [Accordion component](/components/accordion/) and [Details component](/components/details/).
@@ -29,7 +29,7 @@ When form inputs are focused, they have a yellow outline and a thick black borde
-[Radios](/components/radios/) and [checkboxes](/components/checkboxes/) use the same style.
+[Radios components](/components/radios/) and [checkboxes components](/components/checkboxes/) use the same style.
diff --git a/src/patterns/addresses/index.md b/src/patterns/addresses/index.md
index cf07335401..d82c83542f 100644
--- a/src/patterns/addresses/index.md
+++ b/src/patterns/addresses/index.md
@@ -101,7 +101,7 @@ If a postcode entered is not a real postcode, use a message like this:
{{ example({ group: "patterns", item: "addresses", example: "error-postcode", html: true, nunjucks: true, open: false, size: "s" }) }}
-Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
+Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.
## Address lookup
diff --git a/src/patterns/bank-details/index.md b/src/patterns/bank-details/index.md
index 9eec79e6cf..43f7587a9c 100644
--- a/src/patterns/bank-details/index.md
+++ b/src/patterns/bank-details/index.md
@@ -111,7 +111,7 @@ Error messages should be styled like this:
{{ example({ group: "patterns", item: "bank-details", example: "error", html: true, nunjucks: true, open: false, size: "s" }) }}
-Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
+Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.
#### If the name on the account is empty
diff --git a/src/patterns/check-answers/index.md b/src/patterns/check-answers/index.md
index 1a334c5706..049683c3a2 100644
--- a/src/patterns/check-answers/index.md
+++ b/src/patterns/check-answers/index.md
@@ -36,7 +36,7 @@ When designing a very large transaction with multiple sections, it may help to i
This can be valuable for services where different users might be completing each section. You should test this approach with your users to find out if it’s helpful.
-Use [summary cards](/components/summary-list/#summary-cards) when users need to check multiple things of the same type. For example to review a series of interview appointments or application choices.
+Use the [Summary card component](/components/summary-list/#summary-cards) when users need to check multiple things of the same type. For example to review a series of interview appointments or application choices.
## How it works
diff --git a/src/patterns/complete-multiple-tasks/index.md b/src/patterns/complete-multiple-tasks/index.md
index 2a2990f192..ef40b2472b 100644
--- a/src/patterns/complete-multiple-tasks/index.md
+++ b/src/patterns/complete-multiple-tasks/index.md
@@ -36,7 +36,7 @@ Help users understand:
{{ example({ group: "patterns", item: "complete-multiple-tasks", example: "default", html: true, nunjucks: true, open: false }) }}
-Complete multiple tasks pages use a [task list component](/components/task-list) for each group of tasks on the page.
+Complete multiple tasks pages use a [Task list component](/components/task-list) for each group of tasks on the page.
## When to use this pattern
@@ -100,7 +100,7 @@ If the user cannot start the task yet, for example because another task must be
#### Tasks containing an error
-You should avoid tasks having an error status by using the [error summary](/components/error-summary/) and [error messages](/components/error-message/) displayed at the point that the error is made, so that the user can fix it straight away.
+You should avoid tasks having an error status by using the [Error summary component](/components/error-summary/) and [Error message component](/components/error-message/) displayed at the point that the error is made, so that the user can fix it straight away.
If it is unavoidable that a task may end up saved but containing an error, use the status text ‘There is a problem’ and a red background.
@@ -135,11 +135,11 @@ Sometimes, it’s better to let the user decide when a task is completed.
This can be helpful when a task involves:
- some questions that are optional
-- writing a long answer (such as in a [textarea](/components/textarea/))
+- writing a long answer (such as in a [Textarea component](/components/textarea/))
- looking up information, such as details about previous jobs
- answers that need to be checked carefully with someone else
-Do this by asking a radio question at the end of the task – either as the last question (if the task is a single page) or on the [‘Check answers’ page](/patterns/check-answers/) (if the task uses multiple [question pages](/patterns/question-pages/)).
+Do this by asking a radio question at the end of the task – either as the last question (if the task is a single page) or on the [Check answers page in your service](/patterns/check-answers/) (if the task uses multiple [Question pages in your service](/patterns/question-pages/)).
Ask ‘Have you completed this section?’ with the radio options ‘Yes, I’ve completed this section’ or ‘No, I’ll come back later’.
@@ -159,7 +159,7 @@ Always allow users to go back into a task to change their answer.
#### Error messages
-If the user does not select an option, show an [error message](/components/error-message/) to say: 'Select whether you’ve completed this section'.
+If the user does not select an option, show an [Error message component](/components/error-message/) to say: 'Select whether you’ve completed this section'.
{{ example({ group: "patterns", item: "complete-multiple-tasks", example: "have-you-completed-this-section-error", html: true, nunjucks: true, open: false }) }}
@@ -167,6 +167,6 @@ If the user does not select an option, show an [error message](/components/error
This pattern was previously named ‘Task list’ and was [developed by a team at the Government Digital Service (GDS)](https://designnotes.blog.gov.uk/2017/04/04/weve-published-the-task-list-pattern/).
-It was then iterated by a cross-government collaboration and published as a new [task list component](/components/task-list/) with updated guidance and research.
+It was then iterated by a cross-government collaboration and published as a new [Task list component](/components/task-list/) with updated guidance and research.
-See the [research on the new task list component](/components/task-list#research-on-this-component) for details of research done, and known issues and gaps.
+See the [research on the new Task list component](/components/task-list#research-on-this-component) for details of research done, and known issues and gaps.
diff --git a/src/patterns/confirm-a-phone-number/index.md b/src/patterns/confirm-a-phone-number/index.md
index af90fab5a5..92954f34c1 100644
--- a/src/patterns/confirm-a-phone-number/index.md
+++ b/src/patterns/confirm-a-phone-number/index.md
@@ -37,7 +37,7 @@ Check that a user has access to a specific mobile phone number using a security
Ask the user to enter a security code when they need to sign in or complete a higher-risk task, such as changing a password.
-Asking the user to enter a security code sent to their mobile phone gives a second layer of security over a [password](/patterns/passwords/).
+Asking the user to enter a security code sent to their mobile phone gives a second layer of security over only [asking for a password](/patterns/passwords/).
You can ask for a security code every time a user signs in or only once per device, depending on the risk level of your service.
diff --git a/src/patterns/confirm-an-email-address/index.md b/src/patterns/confirm-an-email-address/index.md
index 2c8e6529ef..35ada9f90f 100644
--- a/src/patterns/confirm-an-email-address/index.md
+++ b/src/patterns/confirm-an-email-address/index.md
@@ -57,7 +57,7 @@ If you use email confirmation loops you must consider:
- whether to use a blocking or non-blocking loop
- the design of the ‘activate your account’ page
-Most email confirmation loops will send the user a link and ask them to click it to return to the service. Another approach is to send the user a security code, similar to the [Confirm a phone number](/patterns/confirm-a-phone-number/) pattern, and ask the user to enter it.
+Most email confirmation loops will send the user a link and ask them to click it to return to the service. Another approach is to send the user a security code, similar to the [Confirm a phone number pattern](/patterns/confirm-a-phone-number/), and ask the user to enter it.
{% call wcagNote({id: "wcag-copy-paste-security-codes"}) %}
diff --git a/src/patterns/contact-a-department-or-service-team/index.md b/src/patterns/contact-a-department-or-service-team/index.md
index 05bbdb6bec..7eb07f8da7 100644
--- a/src/patterns/contact-a-department-or-service-team/index.md
+++ b/src/patterns/contact-a-department-or-service-team/index.md
@@ -88,13 +88,13 @@ For example, tell users how long it'll usually take to:
### Inset contact information
-Use [inset text](/components/inset-text/) to display contact information when you want to differentiate it from the content that surrounds it.
+Use the [Inset text component](/components/inset-text/) to display contact information when you want to differentiate it from the content that surrounds it.
{{ example({ group: "patterns", item: "contact-a-department-or-service-team", example: "inset-contact-information", html: true, nunjucks: true, open: false, size: "m" }) }}
### Expanding contact information
-If contact information is less important than other content on a page, you can enclose contact information inside the [details](/components/details/) component to avoid distracting users.
+If contact information is less important than other content on a page, you can enclose contact information inside the [Details component](/components/details/) to avoid distracting users.
For example, if you need to provide contact information at the bottom of a form page for users who need help completing the form.
diff --git a/src/patterns/cookies-page/index.md b/src/patterns/cookies-page/index.md
index a0f5853562..f71bd4e94c 100644
--- a/src/patterns/cookies-page/index.md
+++ b/src/patterns/cookies-page/index.md
@@ -45,7 +45,7 @@ You should also identify if each cookie is set on the server or client.
The result of your audit will guide your cookie policy and how the service should use a cookies page and cookie banner.
-The [cookie banner component](/components/cookie-banner/) shows several options for using a cookie banner for services that:
+The [Cookie banner component](/components/cookie-banner/) shows several options for using a cookie banner for services that:
- only set essential cookies
- sets non-essential cookies on the server - including services that also set non-essential cookies on the client
@@ -80,22 +80,22 @@ You must get the user’s consent before you set any cookies that are not strict
You can get the user’s consent:
-- by using a [cookie banner](/components/cookie-banner/)
+- by using a [Cookie banner component](/components/cookie-banner/)
- by letting the user change and save their settings on the cookies page
## Publishing your cookies page
-Link to the cookies page from the [service footer](/components/footer/) and from the [cookie banner](/components/cookie-banner/).
+Link to the cookies page from the [Footer component](/components/footer/) and from the [Cookie banner component](/components/cookie-banner/).
## Letting users accept or reject cookies on the cookies page
-Use [radios](/components/radios/) and a [button](/components/button/) to let users accept or reject non-essential cookies.
+Use a [Radios component](/components/radios/) and a [Button component](/components/button/) to let users accept or reject non-essential cookies.
Load the page with the radios set to ‘no’ on the user’s first visit. If they’ve previously used the service and set their preferences, load the page with those preferences selected.
{{ example({ group: "patterns", item: "cookies-page", example: "cookies-form", html: true, nunjucks: true, open: false }) }}
-When the user sets or changes their cookie preferences, use a green [notification banner](/components/notification-banner/) to confirm that the service has updated the user’s cookie settings. This is so they can get back to the page they were looking at.
+When the user sets or changes their cookie preferences, use a green [Notification banner component](/components/notification-banner/) to confirm that the service has updated the user’s cookie settings. This is so they can get back to the page they were looking at.
{{ example({ group: "patterns", item: "cookies-page", example: "cookies-updated", html: true, nunjucks: true, open: false }) }}
diff --git a/src/patterns/create-a-username/index.md b/src/patterns/create-a-username/index.md
index dbe05f8342..7ec249eb72 100644
--- a/src/patterns/create-a-username/index.md
+++ b/src/patterns/create-a-username/index.md
@@ -12,7 +12,7 @@ Help users to create a unique and memorable username to sign into a service with
## When to use this pattern
-Before using this pattern, you should consider whether you really need users to [create accounts](/patterns/create-accounts/) in the first place.
+Before using this pattern, you should consider whether you really need users to [create accounts in your service](/patterns/create-accounts/) in the first place.
## How it works
diff --git a/src/patterns/dates/index.md b/src/patterns/dates/index.md
index 5f92e636b8..26f7a7c8e5 100644
--- a/src/patterns/dates/index.md
+++ b/src/patterns/dates/index.md
@@ -31,7 +31,7 @@ In some cases you might need users to pick a date from a given selection.
### Asking for memorable dates
-Ask for memorable dates, like dates of birth, using the [date input](/components/date-input/) component.
+Ask for memorable dates, like dates of birth, using the [Date input component](/components/date-input/) component.
{{ example({ group: "patterns", item: "dates", example: "default", html: true, nunjucks: true, open: false, size: "s", loading: "eager" }) }}
diff --git a/src/patterns/email-addresses/index.md b/src/patterns/email-addresses/index.md
index 0745266b00..c917cb4a05 100644
--- a/src/patterns/email-addresses/index.md
+++ b/src/patterns/email-addresses/index.md
@@ -93,7 +93,7 @@ Some services ask users to repeat their email address. Only do this if your user
### Check the user has access to their email account
-If email is an essential part of your service - for example to send a password reset - you can confirm whether the user has access to the email address they give you using an [email confirmation loop](/patterns/confirm-an-email-address/).
+If email is an essential part of your service - for example to send a password reset - you can confirm whether the user has access to the email address they give you [using an email confirmation loop](/patterns/confirm-an-email-address/).
However, these are disruptive and should be avoided as far as possible.
@@ -103,7 +103,7 @@ Error messages should be styled like this:
{{ example({ group: "patterns", item: "email-addresses", example: "error", html: true, nunjucks: true, open: false, size: "s" }) }}
-Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
+Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.
#### If the email address is not in the correct format and there is no example
diff --git a/src/patterns/equality-information/index.md b/src/patterns/equality-information/index.md
index eb473dba43..ca8c3033c9 100644
--- a/src/patterns/equality-information/index.md
+++ b/src/patterns/equality-information/index.md
@@ -48,7 +48,7 @@ When asking users for equality information, make it clear:
For a service that people are likely to use on a one-off basis:
-- place equality questions between the [‘check your answers’ page](/patterns/check-answers/) and the [confirmation page](/patterns/confirmation-pages/)
+- place equality questions between [your service's Check your answers page](/patterns/check-answers/) and [your Confirmation page](/patterns/confirmation-pages/)
- show the user a screen explaining why you’re asking the questions and what you’ll do with the information they provide, like the one below
{{ example({ group: "patterns", item: "equality-information", example: "explainer-screen", html: true, nunjucks: true, open: false, loading: "eager" }) }}
diff --git a/src/patterns/exit-a-page-quickly/index.md b/src/patterns/exit-a-page-quickly/index.md
index eecaaab570..ece11e5426 100644
--- a/src/patterns/exit-a-page-quickly/index.md
+++ b/src/patterns/exit-a-page-quickly/index.md
@@ -11,7 +11,7 @@ layout: layout-pane.njk
{% from "_example.njk" import example %}
Give users a way to quickly and safely exit a service, website or application.
-Use this pattern to add the [Exit this page](/components/exit-this-page/) component to your service and keep users safe by helping them to protect their privacy.
+Use this pattern to add the [Exit this page component](/components/exit-this-page/) to your service and keep users safe by helping them to protect their privacy.
## When to use this pattern
@@ -36,7 +36,7 @@ You should not use this pattern for standalone content pages, such as dashboards
## How it works
-First, you’ll need to add the [Exit this page](/components/exit-this-page/) component to your service and decide how it should work within your service.
+First, you’ll need to add the [Exit this page component](/components/exit-this-page/) to your service and decide how it should work within your service.
The component has several parts, including:
diff --git a/src/patterns/names/index.md b/src/patterns/names/index.md
index 008c18c7fa..f19863988e 100644
--- a/src/patterns/names/index.md
+++ b/src/patterns/names/index.md
@@ -120,7 +120,7 @@ Avoid asking users for their title.
It’s extra work for them and you’re asking them to potentially reveal their gender and marital status, which they may not want to do.
-It’s also hard to predict the range of titles your users will have. If you have to ask for someone’s title, use an optional [text input](/components/text-input/) not a [select](/components/select/).
+It’s also hard to predict the range of titles your users will have. If you have to ask for someone’s title, use an optional [Text input component](/components/text-input/) not a [Select component](/components/select/).
Remember to correctly use people’s names in any resulting correspondence.
@@ -140,7 +140,7 @@ Error messages should be styled like this:
{{ example({ group: "patterns", item: "names", example: "error", html: true, nunjucks: true, open: true }) }}
-Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
+Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.
## Research on this pattern
diff --git a/src/patterns/national-insurance-numbers/index.md b/src/patterns/national-insurance-numbers/index.md
index 4cc2a9f8d7..5bbe19490c 100644
--- a/src/patterns/national-insurance-numbers/index.md
+++ b/src/patterns/national-insurance-numbers/index.md
@@ -42,7 +42,7 @@ If you currently use National Insurance numbers to verify identity, find out how
## How it works
-Use a single [text input](/components/text-input/) labelled ‘National Insurance number’. Write it out in full and never use abbreviations such as ‘NINO’ or ‘NI Number’.
+Use a single [Text input component](/components/text-input/) labelled ‘National Insurance number’. Write it out in full and never use abbreviations such as ‘NINO’ or ‘NI Number’.
Show a National Insurance number using the format ‘QQ 12 34 56 C’ – the spaces will break up the number to make it easier to read, particularly for screen reader users.
@@ -77,7 +77,7 @@ Error messages should be styled like this:
{{ example({ group: "patterns", item: "national-insurance-numbers", example: "error", html: true, nunjucks: true, open: true, size: "s" }) }}
-Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
+Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.
#### If the National Insurance number is not in the correct format and there is no example
diff --git a/src/patterns/navigate-a-service/index.md b/src/patterns/navigate-a-service/index.md
index 2ca8bff9c7..7de8884dc2 100644
--- a/src/patterns/navigate-a-service/index.md
+++ b/src/patterns/navigate-a-service/index.md
@@ -30,7 +30,7 @@ Help users know they’re using your service and navigate around it.
]
}) }}
-Use this pattern to plan and design your navigation header using the [GOV.UK header](/components/header/) and [Service navigation](/components/service-navigation/) components. Check the ‘When to use this component’ sections in each of these components to make sure they’re right for your service.
+Use this pattern to plan and design your navigation header using the [GOV.UK header component](/components/header/) and [Service navigation component](/components/service-navigation/). Check the ‘When to use this component’ sections in each of these components to make sure they’re right for your service.
This pattern also includes guidance on how to add other elements commonly used alongside navigation that are not in the GOV.UK Design System. We’ve included this guidance to help service teams make navigation headers more consistent across government.
@@ -48,17 +48,17 @@ Simplify the user journey as much as possible first. This might remove the need
If your service does have a clear end-to-end journey, avoid using navigation links.
-Use [Task lists](/components/task-list/) instead, as they’re better for helping users understand:
+Use a [Task list component](/components/task-list/) instead, as they’re better for helping users understand:
- the tasks involved in completing a transaction
- the order they should complete tasks in
- when they’ve completed tasks
-See how to do this in the [Help users to complete multiple tasks](/patterns/complete-multiple-tasks/) pattern.
+See how to do this in the [Help users to complete multiple tasks pattern](/patterns/complete-multiple-tasks/).
## How it works
-Together, the [GOV.UK header](/components/header/) and [Service navigation](/components/service-navigation/) components work together to assure users that they’re in the right place to use your service. They also help users understand that GOV.UK functions as one website.
+Together, the [GOV.UK Header component](/components/header/) and [Service navigation component](/components/service-navigation/) work together to assure users that they’re in the right place to use your service. They also help users understand that GOV.UK functions as one website.
The GOV.UK header (black background) includes space to show:
@@ -73,9 +73,9 @@ The Service navigation (grey background) includes space to show:
### Plan your GOV.UK header
-The [GOV.UK header](/components/header/) component should only be used to show the GOV.UK logo and any GOV.UK-wide tools used in your service, such as GOV.UK One Login.
+The [GOV.UK header component](/components/header/) should only be used to show the GOV.UK logo and any GOV.UK-wide tools used in your service, such as GOV.UK One Login.
-We recommend using the [Service navigation](/components/service-navigation/) component to show your service name and navigation links instead of the GOV.UK header, and to start updating existing services.
+We recommend using the [Service navigation component](/components/service-navigation/) to show your service name and navigation links instead of the GOV.UK header, and to start updating existing services.
#### Do not show GOV.UK topic links
@@ -83,11 +83,11 @@ To help users focus on completing your service, [do not add the menu of GOV.UK t
The menu bar used in the [GOV.UK homepage](https://www.gov.uk/) and mainstream guidance pages are designed to help users explore topics and find government services and information.
-Once users enter your service, they should have all the information they need to complete it [from its start page](/patterns/start-using-a-service/). If you need to refer to specific information as part of your service’s journey, use links within your pages.
+Once users enter your service, they should have all the information they need to complete it [from your service's Start page](/patterns/start-using-a-service/). If you need to refer to specific information as part of your service’s journey, use links within your pages.
### Plan your Service navigation
-Use the [Service navigation](/components/service-navigation/) component to show your service name, navigation links and other service-level tools.
+Use the [Service navigation component](/components/service-navigation/) to show your service name, navigation links and other service-level tools.
#### Show the service name as a link
@@ -172,7 +172,7 @@ To help users understand what the search input will cover, include ‘Search [yo
#### Phase banners
-Show the [Phase banner](/components/phase-banner/) component directly under either:
+Show the [Phase banner component](/components/phase-banner/) directly under either:
- the Service navigation component
- the GOV.UK header and blue colour bar (if your service does not use the Service navigation component)
@@ -185,11 +185,11 @@ You can choose to place the Phase banner in a more appropriate place for your se
Show any elements that only affect the current page after the Service header navigation.
-Place any [Breadcrumbs](/components/breadcrumbs/) just before the `<main>` element. Placing them here means that the ‘Skip to main content’ link allows the user to skip all navigation links, including breadcrumbs.
+Place any [Breadcrumbs components](/components/breadcrumbs/) just before the `<main>` element. Placing them here means that the ‘Skip to main content’ link allows the user to skip all navigation links, including breadcrumbs.
## Changes to the GOV.UK header and Service navigation, and how they work together
-We introduced this pattern and the [Service navigation](/components/service-navigation/) component in August 2024. We recommend service teams start using these to show navigation links in their services.
+We introduced this pattern and the [Service navigation component](/components/service-navigation/) in August 2024. We recommend service teams start using these to show navigation links in their services.
We’re confident that the new component is an improvement on the ‘GOV.UK header with navigation’, which we’ll deprecate in the next breaking release of GOV.UK Frontend.
diff --git a/src/patterns/passwords/index.md b/src/patterns/passwords/index.md
index 0c5f31c8df..c9644e4a53 100644
--- a/src/patterns/passwords/index.md
+++ b/src/patterns/passwords/index.md
@@ -27,9 +27,9 @@ Help users to create and enter secure and memorable passwords.
## When to use this pattern
-You should follow this pattern whenever you need users to create or enter a password. Before using this pattern, you should also read the guidance on [user accounts](/patterns/create-accounts/).
+You should follow this pattern whenever you need users to create or enter a password. Before using this pattern, you should also read the guidance on the [User accounts pattern](/patterns/create-accounts/).
-For technical considerations, you may also want to read the guidance for the [Password input](/components/password-input/) component.
+For technical considerations, you may also want to read the guidance for the [Password input component](/components/password-input/).
## How it works
diff --git a/src/patterns/phone-numbers/index.md b/src/patterns/phone-numbers/index.md
index a0a339ebfc..51ea48797c 100644
--- a/src/patterns/phone-numbers/index.md
+++ b/src/patterns/phone-numbers/index.md
@@ -44,7 +44,7 @@ Error messages should be styled like this:
{{ example({ group: "patterns", item: "phone-numbers", example: "error-empty-field", html: true, nunjucks: true, open: false, size: "s" }) }}
-Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
+Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.
#### If the phone number is not in the correct format and there is no example
diff --git a/src/patterns/problem-with-the-service-pages/index.md b/src/patterns/problem-with-the-service-pages/index.md
index 9c440a957b..dd3f86dc13 100644
--- a/src/patterns/problem-with-the-service-pages/index.md
+++ b/src/patterns/problem-with-the-service-pages/index.md
@@ -40,7 +40,7 @@ Use this page when there is an unexpected problem with the service. Use the same
Log all errors and fix them as quickly as possible.
-Only display the page for a short time. If a problem cannot be fixed quickly, close the service and use a [service unavailable page](/patterns/service-unavailable-pages/).
+Only display the page for a short time. If a problem cannot be fixed quickly, close the service and use a [Service unavailable page](/patterns/service-unavailable-pages/).
## How it works
diff --git a/src/patterns/question-pages/index.md b/src/patterns/question-pages/index.md
index 8074a4a54f..729e1ec2ae 100644
--- a/src/patterns/question-pages/index.md
+++ b/src/patterns/question-pages/index.md
@@ -43,7 +43,7 @@ To help you work out what to ask, you can carry out a [question protocol](https:
If you ask for optional information:
- in most contexts, add ‘(optional)’ to the labels of optional fields
-- for [radios](/components/radios/) and [checkboxes](/components/checkboxes/), add ‘(optional)’ to the legend
+- for [Radios components](/components/radios/) and [Checkboxes components](/components/checkboxes/), add ‘(optional)’ to the legend
Never mark mandatory fields with asterisks.
@@ -78,7 +78,7 @@ If the same type of information is needed more than once, make it easier to reus
Some users do not trust browser back buttons when they’re entering data.
-Always include a [back link](/components/back-link/) at the top of question pages to reassure them it’s possible to go back and change previous answers.
+Always include a [Back link component](/components/back-link/) at the top of question pages to reassure them it’s possible to go back and change previous answers.
However, do not break the browser back button. Make sure it takes users to the previous page they were on, in the state they last saw it.
diff --git a/src/patterns/service-unavailable-pages/index.md b/src/patterns/service-unavailable-pages/index.md
index 5570fbf80f..790e6c11c1 100644
--- a/src/patterns/service-unavailable-pages/index.md
+++ b/src/patterns/service-unavailable-pages/index.md
@@ -34,7 +34,7 @@ Tell the user a service is unavailable on purpose. These are also known as 503 a
Use a service unavailable page when a service has been closed on purpose. This could be for a specific period of time or permanently.
-If there is a problem with the service, use a [there is a problem with the service page](/patterns/problem-with-the-service-pages/).
+If there is a problem with the service, use a [There is a problem with the service page](/patterns/problem-with-the-service-pages/).
Have a general page in case you need to close a service and do not have time to update the page. As soon as you know when the service will be available, update the page.
diff --git a/src/patterns/step-by-step-navigation/index.md b/src/patterns/step-by-step-navigation/index.md
index 094a450ce8..7c4a5da628 100644
--- a/src/patterns/step-by-step-navigation/index.md
+++ b/src/patterns/step-by-step-navigation/index.md
@@ -33,7 +33,7 @@ Do not use the step by step pattern:
- when most of the guidance or services that make up the journey are not on GOV.UK
- when the user only needs to read guidance and not take an action
- when there’s no logical or helpful order to complete the tasks - for example, when you’re mostly presenting the user with a series of options
-- inside a transactional service – use the [complete multiple tasks pattern](/patterns/complete-multiple-tasks/) instead
+- inside a transactional service – use the [Complete multiple tasks pattern](/patterns/complete-multiple-tasks/) instead
## How it works
diff --git a/src/patterns/task-list-pages/index.md b/src/patterns/task-list-pages/index.md
index d3b3e3c348..216c2671b4 100644
--- a/src/patterns/task-list-pages/index.md
+++ b/src/patterns/task-list-pages/index.md
@@ -4,4 +4,4 @@ layout: layout-archived.njk
ignoreInSitemap: true
---
-The task list pattern has been renamed [complete multiple tasks](/patterns/complete-multiple-tasks/) and a new [task list component](/components/task-list/) published with updated guidance.
+The task list pattern has been renamed to the [Complete multiple tasks pattern](/patterns/complete-multiple-tasks/) and a new [Task list component](/components/task-list/) published with updated guidance.
diff --git a/src/patterns/understand-the-impact-of-an-emergency/index.md b/src/patterns/understand-the-impact-of-an-emergency/index.md
index 63237cb511..4ecc29d2d5 100644
--- a/src/patterns/understand-the-impact-of-an-emergency/index.md
+++ b/src/patterns/understand-the-impact-of-an-emergency/index.md
@@ -4,4 +4,4 @@ layout: layout-archived.njk
ignoreInSitemap: true
---
-For up to date information, see [the notification banner component](/components/notification-banner/).
+For up to date information, see the [Notification banner component](/components/notification-banner/).
diff --git a/src/patterns/validation/index.md b/src/patterns/validation/index.md
index 76d7902db9..c85f2cd6aa 100644
--- a/src/patterns/validation/index.md
+++ b/src/patterns/validation/index.md
@@ -39,9 +39,9 @@ Do not use validation to check whether the user is eligible to use the service o
There are separate patterns for:
-- [‘there is a problem with the service’ pages](/patterns/problem-with-the-service-pages/)
-- [‘page not found’ pages](/patterns/page-not-found-pages/)
-- [‘service unavailable’ pages](/patterns/service-unavailable-pages/)
+- [‘There is a problem with the service’ pages](/patterns/problem-with-the-service-pages/)
+- [‘Page not found’ pages](/patterns/page-not-found-pages/)
+- [‘Service unavailable’ pages](/patterns/service-unavailable-pages/)
## How it works
@@ -69,8 +69,8 @@ If the user's answers fail validation:
- show them the page again, with the form fields as the user filled them in
- add ‘Error: ’ to the beginning of the page `<title>` so screen readers read it out as soon as possible
-- show an [error summary](/components/error-summary/) at the top of the page, and move keyboard focus to it
-- show [error messages](/components/error-message/) next to fields with errors
+- show an [Error summary component](/components/error-summary/) at the top of the page, and move keyboard focus to it
+- show [Error message components](/components/error-message/) next to fields with errors
Read guidance on [writing good error messages](/components/error-message/#be-clear-and-concise).
@@ -91,7 +91,7 @@ Do not validate when the user moves away from a field. Wait until they try to mo
Generally speaking, avoid validating the information in a field before the user has finished entering it. This sort of validation can cause problems - especially for users who type more slowly.
-Only add this sort of validation if your user research shows that, on balance, it solves more problems for users than it causes. For example, the [character count component](/components/character-count/) shows users an error message when they go over the character limit. Because it’s important that users do not spend time and effort writing out a response that turns out to be too long.
+Only add this sort of validation if your user research shows that, on balance, it solves more problems for users than it causes. For example, the [Character count component](/components/character-count/) shows users an error message when they go over the character limit. Because it’s important that users do not spend time and effort writing out a response that turns out to be too long.
If you do use this sort of validation, [make sure you do it in a way that’s accessible](https://www.gov.uk/service-manual/technology/accessibility-for-developers-an-introduction).
diff --git a/src/styles/headings/index.md b/src/styles/headings/index.md
index 828a853a48..ca7ac87508 100644
--- a/src/styles/headings/index.md
+++ b/src/styles/headings/index.md
@@ -15,7 +15,7 @@ order: 7
Use heading tags, such as `<h1>`, `<h2>` and so on, to tag the headings on a page. Apply a heading class, such as `govuk-heading-l`, to style them visually. Style headings consistently to create a clear content structure throughout your service.
-For a [question page](/patterns/question-pages/), or pages with long headings, follow the usual hierarchy of heading levels and styles associated with them. For example, `govuk-heading-l` for an `<h1>`, followed by `govuk-heading-m` for an `<h2>` and so on. In rare cases, you might want to alter how you use the headings hierarchy to achieve a better visual balance. An example of this is in [the design system's notification banner](https://design-system.service.gov.uk/components/notification-banner/success/) which uses heading levels in a different order to emphasise the most important information. If you do change the heading hierarchy in a similar way, it needs to go through accessibility testing before use.
+For a [Question page in your service](/patterns/question-pages/), or pages with long headings, follow the usual hierarchy of heading levels and styles associated with them. For example, `govuk-heading-l` for an `<h1>`, followed by `govuk-heading-m` for an `<h2>` and so on. In rare cases, you might want to alter how you use the headings hierarchy to achieve a better visual balance. An example of this is in [the design system's notification banner](https://design-system.service.gov.uk/components/notification-banner/success/) which uses heading levels in a different order to emphasise the most important information. If you do change the heading hierarchy in a similar way, it needs to go through accessibility testing before use.
Write all headings in sentence case.
diff --git a/src/styles/layout/index.md b/src/styles/layout/index.md
index 9aa170bde8..4e9f0b5e6a 100644
--- a/src/styles/layout/index.md
+++ b/src/styles/layout/index.md
@@ -45,13 +45,13 @@ If you want to build your layout from scratch, or understand what each of the pa
To set up your layout you will need to create 2 wrappers. The first should have the class `govuk-width-container`, which sets the maximum width of the content but does not add any vertical margin or padding.
-If your design requires them, you should place components such as [breadcrumbs](/components/breadcrumbs/), [back link](/components/back-link/) and [phase banner](/components/phase-banner/) inside this wrapper so that they sit directly underneath the header.
+If your design requires them, you should place components such as the [Breadcrumbs component](/components/breadcrumbs/), [Back link component](/components/back-link/) and [Phase banner component](/components/phase-banner/) inside this wrapper so that they sit directly underneath the header.
### Add vertical space
Within `govuk-width-container` you should add the `govuk-main-wrapper` class to your `<main>` element. This adds responsive padding to the top and bottom of the page and will be the container for your main content.
-If you’re not using the [breadcrumbs](/components/breadcrumbs/), [back link](/components/back-link/) or [phase banner](/components/phase-banner/) components in your design, add the correct amount of vertical padding above the content by adding one of the following to your `<main>` element:
+If you’re not using the [Breadcrumbs component](/components/breadcrumbs/), [Back link component](/components/back-link/) or [Phase banner component](/components/phase-banner/) in your design, add the correct amount of vertical padding above the content by adding one of the following to your `<main>` element:
- the `govuk-main-wrapper--auto-spacing` class
- the `govuk-main-wrapper--l` class - if `govuk-main-wrapper--auto-spacing` does not work for your service
diff --git a/src/styles/page-template/index.md b/src/styles/page-template/index.md
index 84fee3bcd0..c1f09921eb 100644
--- a/src/styles/page-template/index.md
+++ b/src/styles/page-template/index.md
@@ -16,7 +16,7 @@ Use this template to keep your pages consistent with the rest of GOV.UK.
This page template combines the boilerplate markup and [components](/components/) needed for a basic GOV.UK page. It includes:
- JavaScript that adds a `.govuk-frontend-supported` class, which is required by components with JavaScript behaviour
-- the [skip link](/components/skip-link/), [header](/components/header/) and [footer](/components/footer/) components
+- the [Skip link component](/components/skip-link/), [Header component](/components/header/) and [Footer component](/components/footer/)
- the favicon, and other related theme icons
In the examples provided, we show both HTML and [Nunjucks](https://frontend.design-system.service.gov.uk/use-nunjucks/).
@@ -37,7 +37,7 @@ This example shows the minimum required for a GOV.UK page.
You can customise the page template, for example, by:
- adding a service name and navigation
-- including a [back link](/components/back-link/) or [phase banner](/components/phase-banner/)
+- including a [Back link component](/components/back-link/) or [Phase banner component](/components/phase-banner/)
{{ example({ group: "styles", item: "page-template", example: "custom", customCode: true, html: true, nunjucks: true, open: false, size: "xl" }) }}
@@ -55,7 +55,7 @@ To set a 'variable' option, use `set` to pass in a single value or string. For e
{% endraw %}
```
-By default, the template contains a [skip link](/components/skip-link/), [header](/components/header/) and [footer](/components/footer/), all of which require 'blocks' to change.
+By default, the template contains a [Skip link component](/components/skip-link/), [Header component](/components/header/) and [Footer component](/components/footer/), all of which require 'blocks' to change.
To set a 'block' option, use `block` to pass in a multiline value or HTML markup. For example, to add a block of HTML before the closing `</body>` element in the page template using the `bodyEnd` option:
@@ -111,8 +111,8 @@ To change the components that are included in the page template by default, set
<td class="govuk-table__cell">
Add content that needs to appear outside <code><main></code> element.
<br>
- For example: The <a class="govuk-link" href="/components/back-link/">back link</a> component, <a class="govuk-link" href="/components/breadcrumbs/">breadcrumbs</a> component,
- <a class="govuk-link" href="/components/phase-banner/">phase banner</a> component.
+ For example: The <a class="govuk-link" href="/components/back-link/">Back link component</a>, <a class="govuk-link" href="/components/breadcrumbs/">Breadcrumbs component</a>,
+ <a class="govuk-link" href="/components/phase-banner/">Phase banner component</a>.
</td>
</tr>
<tr class="govuk-table__row">
@@ -138,7 +138,7 @@ To change the components that are included in the page template by default, set
<td class="govuk-table__cell">
Add content after the opening <code><body></code> element.
<br>
- For example: The <a class="govuk-link" href="/components/cookie-banner/">cookie banner</a> component.
+ For example: The <a class="govuk-link" href="/components/cookie-banner/">Cookie banner component</a>.
</td>
</tr>
<tr class="govuk-table__row">
@@ -164,7 +164,7 @@ To change the components that are included in the page template by default, set
<td class="govuk-table__cell">footer</td>
<td class="govuk-table__cell">Block</td>
<td class="govuk-table__cell">
- Override the default <a class="govuk-link" href="/components/footer/">footer</a> component.
+ Override the default <a class="govuk-link" href="/components/footer/">Footer component</a>.
</td>
</tr>
<tr class="govuk-table__row">
@@ -180,7 +180,7 @@ To change the components that are included in the page template by default, set
<td class="govuk-table__cell">header</td>
<td class="govuk-table__cell">Block</td>
<td class="govuk-table__cell">
- Override the default <a class="govuk-link" href="/components/header/">header</a> component.
+ Override the default <a class="govuk-link" href="/components/header/">Header component</a>.
</td>
</tr>
<tr class="govuk-table__row">
@@ -244,7 +244,7 @@ To change the components that are included in the page template by default, set
<td class="govuk-table__cell">skipLink</td>
<td class="govuk-table__cell">Block</td>
<td class="govuk-table__cell">
- Override the default <a class="govuk-link" href="/components/skip-link/">skip link</a> component.
+ Override the default <a class="govuk-link" href="/components/skip-link/">Skip link component</a>.
</td>
</tr>
<tr class="govuk-table__row">