Add some heading helper classes

[mgdhs]

Description

This adds some helper functionality to headings. Don't you hate when someone says 'make that heading a h4', but to be semantic and accessible, it has to stay a <h3>. Well, these helpers let you have the best of both worlds. It can be a h3, but look like a h4.

Additional information

• It may be more useful in non-application uses, such as authors entering content into a CMS. However, it can be useful within a web application too.
• It breaks the guideline of 'don't name things based on appearance', and could probably be done using alternative class names. However, it is useful to keep consistency within your site.
• It could easily be abused. <p class="h2">My heading</p> could be a nasty result of using this badly. Some clear guidance will need to be included in the Design Guide.
• It is useful in circumstances where the space available to headings is narrow and the default headings look to big. Here's a prominent example where we use it in the wild.
• I was initially unconvinced this was a good idea, but it is something we use only when needed with great success.

Definition of Done

• Content/documentation reviewed by Julian or someone in the Content Team
• UX reviewed by Gary or someone the Design team
• Code reviewed by one of the core developers
• Acceptance Testing
  • Cross-browser tested against standard browser matrix
  • Tested on multiple devices (TBD)
  • HTML5 validation (CircleCI)
  • Accessibility testing & WCAG2 compliance (npm test)
• Stakeholder/PO review
• CHANGELOG updated

[elisechant]

Yes! we needed this. ⭐️