Skip to main content

Headings

Defines HTML headings

Heading Styles​

Headline Styles​

Pages must start with an H1 heading. The Headline style can be applied to H1 when a larger font style is required, such as hero banners, homepage designs and where a more prominent and impactful heading is needed.

Where content is lengthy and the Headline style is required, Headline compact is available use to maintain the larger font style.

Semantc ordering​

Headings must be nested by their rank. The most important heading has the rank 1 (H1), the least important heading rank 6 (H6).

<body>
  <h1>Rank 1</h1>
  <h2>Rank 2</h2>
  <h3>Rank 3</h3>
  <h4>Rank 4</h4>
  <h5>Rank 5</h5>
  <h6>Rank 6</h6>
</body>

Do

  • Start all pages with an H1 heading
  • Use only one H1 heading per page
  • Ensure sufficient colour contrast between foreground and background
  • Use headings with an equal or higher rank start a new section. Headings with a lower rank start new subsections that are part of the higher ranked section

Don't

  • Skip heading ranks. This can be confusing and should be avoided where possible. For example, make sure that a H2 is not followed directly by an H4.
  • Leave heading elements empty
  • Exceed more than 100 characters in a heading.
  • Write headings in all-caps as it can present accessibility barriers for some types of users.

Heading Sizes​

Classnames can be used to override a headings default styling with another where required. For example, a h2 may be the correct semantic heading, however you require a smaller font size to work in the interface. You can apply a h3 class <h2 className="h3"> to replicate the desired size.

Available heading sizes are h1 through to h6.

Heading Icon​

When you want to style a heading with an Icon.

Tailwind​

Alert informationThese classes require Tailwind CSS. Refer to the getting started documentation to add styling

Heading Colour​

Alert informationBranding and configuration

Be careful setting the heading colour via utility classes as it can impact the brand styling. Only apply color based utility classes if the styling is consistent across all brands in an application.

The brand configuration object (see examples and docs) provides a way for multi-branded applications to manage and control the styling of components for each brand in a simple way.

The full list of colour classes can be found in the Text colour docs.

Margin, Padding Alignment (Tailwind)​

Below there are some examples. Please see tailwind's full documentation for:

Visibility display/hidden (Tailwind)​

Please see tailwind's full documentation on visibility and also see display/hidden