- Taxonomic name: A-HEADING
- Added on: v3.0.0 (15/09/17)
- Updated on: v4.10.0 (21/06/19)
Heading
Heading elements implement five levels of document headings; <h1> is the most important and <h5> is the least. A heading element briefly describes the topic of the section it introduces.
Design and usage
- All headings are built to work on light and dark accent colours.
Examples
Standard headings
Interactive example
Code example
<p class="a-heading a-heading--0 [ Modifier ]>...</p><h1>...</h1>
<!-- or --->
<p class="a-heading a-heading--1 [ Modifier ]">...</p><h2>...</h2>
<!-- or --->
<p class="a-heading a-heading--2 [ Modifier ]">...</p><h3>...</h3>
<!-- or --->
<p class="a-heading a-heading--3 [ Modifier ]">...</p><h4>...</h4>
<!-- or --->
<p class="a-heading a-heading--4 [ Modifier ]">...</p><h5>...</h5>
<!-- or --->
<p class="a-heading a-heading--5 [ Modifier ]">...</p>Heading with icon
Interactive example
Code example
<h2 class="a-heading a-heading--2 a-heading--light a-heading-icon [ Modifier ]">...</h2>Development and test
Notes for developers
There should always be one heading on the page which is larger than other headings; the size of this heading will depend on the type of page, for example, whether the heading overlays a hero image or not. The hierarchy of heading styles should be applied consistently both within and across pages.
Ensure that the correct level heading is used wherever appropriate to maintain the semantics of the document.
Notes for testers
- Ensure that headings flow in a logical order / hierarchy.
- Use a screen reader to confirm that the headings are announced in the correct order.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.a-heading |
Base styles for a heading | Yes |
|
|
.a-heading--0 |
Level 0 heading for hero space | .a-heading |
||
.a-heading--1 |
Level 1 heading | .a-heading |
||
.a-heading--2 |
Level 2 heading | .a-heading |
||
.a-heading--3 |
Level 3 heading | .a-heading |
||
.a-heading--4 |
Level 4 heading | .a-heading |
||
.a-heading--5 |
Level 5 heading | .a-heading |
||
.a-heading--bold |
Modifier for H0, H1, H2 and H3 styling for heavier weight font |
|
||
.a-heading--light |
Modifier for H0, H1, H2 and H3 styling for lighter weight font |
|
||
.a-heading-icon |
Base styles for a heading with icon centered above |
|
||
.a-heading-icon--health |
Modifier to add the health product icon | .a-heading-icon |
 |
|
.a-heading-icon--home |
Modifier to add the home product icon | .a-heading-icon |
 |
|
.a-heading-icon--life |
Modifier to add the life product icon | .a-heading-icon |
 |
|
.a-heading-icon--motor |
Modifier to add the motor product icon | .a-heading-icon |
 |
|
.a-heading-icon--pensions |
Modifier to add the pensions product icon | .a-heading-icon |
 |
|
.a-heading-icon--pet |
Modifier to add the pet product icon | .a-heading-icon |
 |
|
.a-heading-icon--savings |
Modifier to add the savings product icon | .a-heading-icon |
 |
|
.a-heading-icon--travel |
Modifier to add the travel product icon | .a-heading-icon |
 |
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v4.10.0 (21/06/19)
Latest update:
- updated: Hyperlinks not permitted for use in heading 0 and heading 1. Reduces visual noise and aids a clearer distinction with headings for prominent page heading components where applicable. Associated call to actions are signposted with links and or/buttons.