CCM-14846 Formatting mini hub

[stacey-budd]

Description

Transform https://notify.nhs.uk/using-nhs-notify/formatting website content using the NHS Digital service manual mini hub pattern.

Repurpose and consolidate formatting guidance currently hosted on Upload a letter page to include in new content structure:

• font and font size
• bullet points
• headings
• paragraph and body text

Condense and clarify formatting options overview into a table, using the NHS Digital service manual table component.

Add signposting to messaging best practice content: CCM-14844

Add breadcrumbs to mini-hub navigation.

Context

The NHS design system mini-hub pattern is a way of presenting a series of information about one topic.

It's typically used to break down complex information about health conditions on the NHS website, but we identified them as a way to break up long or complex information on the NHS Notify website.

The mini-hub is made up of:

• a heading and sub-heading which sit at the top of the page
• a contents list component underneath the heading
• a pagination component which goes at the bottom of the page

The NHS website team tested the mini-hub pattern with a range of users, including disabled people and people with low digital literacy. The Digital Accessibility Centre also tested the pattern. They found that:

• the structure and labelling of the pages fitted users' mental model and helped them understand the structure of the content
• the active link formatting in the contents list helped users know where they were and, in some cases, it helped them choose the information that was relevant to them
• most users (including a user with very low digital skills) used the pagination to navigate through pages and knew it was related to the contents list at the top of the page

Type of changes

• Refactoring (non-breaking change)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would change existing functionality)
• Bug fix (non-breaking change which fixes an issue)

Checklist

• I am familiar with the contributing guidelines
• I have followed the code style of the project
• I have added tests to cover my changes
• I have updated the documentation accordingly
• This PR is a result of pair or mob programming

---

Sensitive Information Declaration

To ensure the utmost confidentiality and protect your and others privacy, we kindly ask you to NOT including PII (Personal Identifiable Information) / PID (Personal Identifiable Data) or any other sensitive data in this PR (Pull Request) and the codebase changes. We will remove any PR that do contain any sensitive information. We really appreciate your cooperation in this matter.

• I confirm that neither PII/PID nor sensitive data are included in this PR and the codebase changes.

[emmagifford]

All looks fab! I can see Stace has addressed James's comments, and I fixed the links to open in the same tab and use Markdown.