Skip to main content

Headings

Defines HTML headings

Heading Sizes​

When you want to style a heading with another heading's style for visual purposes. For example, you may have a h2 that appears way too big, but in order to maintain the correct dom structure you apply a h3 class.

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

Heading Accessibility​

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

Proper semantic ordering​

<body>
  <h1>Rank 1</h1>
  <h2>Rank 2</h2>
  <h3>Rank 3</h3>
  <h4>Rank 4</h4>
</body>

Full Requirements for designers/developers​

  • Headings must be nested by their rank. The most important heading has the rank 1 (H1), the least important heading rank 6 (H6)
  • 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
  • Skipping heading ranks can be confusing and should be avoided where possible. For example, make sure that a H2 is not followed directly by an H4.
  • It is acceptable to skip ranks when closing subsections. For example, an H2 beginning a new section, can follow an H4 that closes the previous section
  • Classnames are optional and used to apply another heading's style. For example, a h2 may be the correct dom element to maintain dom structure, but it may appear large, so we can apply a h3 class <h2 className="h3"> to show the desired size.
  • The Page must start with an H1 heading
  • There must be only one H1 heading per page
  • Heading elements cannot be empty
  • There must be a sufficient color contrast between foreground and background
  • Headings must have no more than 100 characters
  • Heading must not be written in all-caps as it can present accessibility barriers for some types of users.
  • CSS can be used to visually represent the content in capitalised form