Add guidance for using heading classes and update examples

[edwardhorsford]

Description

Per discussions on Slack, this adds guidance for which heading classes to use. I started with the guidance from GOV.UK, and have then modified after several rounds of discussions.

Why do this?

NHSUK-Frontend currently styles headings by default - nhsuk-heading-xl for h1s, and nhsuk-heading-l for h2s. This results in very large headings which may not be suitable on transactional / shorter pages.

Service teams should choose appropriate heading sizes to visually balance on the page, but this nhsuk-frontend default likely means that many are using larger headings than they might choose otherwise, thinking it is recommended. GOV.UK faced a similar issue some years ago (not defaulted in code, but all examples used govuk-heading-xl), and added explicit guidance for headings and which is most appropriate.

Updating nhsuk-frontend to not default sizes or to change the default may be something to investigate in the future. In the short term we can add guidance for teams to suggest what sizes are appropriate.

Screenshot:

Checklist

• Tested against the NHS.UK frontend testing policy (Resolution, Browser & Accessibility)
• Code follows the NHS.UK frontend coding standards
• Version number has been increased in package.json (using SEMVER)
• CHANGELOG entry
• Whats new page entry

[edwardhorsford]

Example of a question page before this change:

Example after change:

[sarawilcox]

Hope I've done this correctly. Have suggested changes.

[sarawilcox]

#1974 (comment)

I think the above looks fine. I am looking at adding some guidance around not going down to a heading level 5 in terms of content structure. (That suggests that content is too complex.)

[sarawilcox]

In branch https://github.com/nhsuk/nhsuk-service-manual/tree/review/1-release-7-0-0 awaiting final sign offs and release.

[anandamaryon1]

Released as part of v7.0.0: #2040