Pattern Library (ver. 2)

Headings

Standard headings

HTML heading tags provide users and assistive technologies with information on the hierarchy of content on a webpage or web application.

The h1 to h6 tags provide six levels of semantic HTML headings on a webpage.

Each heading level has pattern styles such as colours, responsive font-sizes and margins.

Example of h1 to h6 headings:

h1 heading (26px to 45px) Sed posuere consectetur est at lobortis

h2 heading (23px to 32px) Sed posuere consectetur est at lobortis

h3 heading (20px to 23px) Sed posuere consectetur est at lobortis

h4 heading (19px) Sed posuere consectetur est at lobortis

h5 heading (16px) Sed posuere consectetur est at lobortis
h6 heading (16px) Sed posuere consectetur est at lobortis

Code


<h1>{{ h1 heading }}</h1>
<h2>{{ h2 heading }}</h2>
<h3>{{ h3 heading }}</h3>
<h4>{{ h4 heading }}</h4>
<h5>{{ h5 heading }}</h5>
<h6>{{ h6 heading }}</h6>

Headings inside an article tag

In our patterns, all headings inside an article tag will have the same line length as a p tag.

The value for the line length is selected to ensure an optimal reading experience by limiting the number of characters per line.

Example of heading inside an article tag:

This h1 Heading is inside an article tag

Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.

Code


<article>
	<h1>{{ h1 heading }}</h1>
	<h2>{{ h2 heading }}</h2>
	<h3>{{ h3 heading }}</h3>
	<h4>{{ h4 heading }}</h4>
	<h5>{{ h5 heading }}</h5>
	<h6>{{ h6 heading }}</h6>
<article>

Usage guidelines for headings

General guidelines

Use h1 to h6 HTML heading tags to provide users or machines with semantic information on the hierarchy of the content.

Start with only one h1 tag as your first level heading on a webpage. Then add additional headings (h2 to h6) as needed to organize your page content hierarchy.

For more information on using headings to create a semantic structure for webpage content view, Semantic Structure on WebAIM.

Subtitle block heading

The Subtitle Block heading provides h2 level headings on a page with 2 options for visual styles to choose from.

Subtitle block heading

This example text is here to show the spacing between the subtitle block and paragraphs after it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut viverra lacus. Quisque consectetur porttitor metus. Suspendisse semper velit vitae elit ullamcorper aliquam. Sed sed arcu sit amet risus sodales interdum eget vitae libero. Ut condimentum vestibulum metus. Mauris nibh libero, efficitur non elit efficitur, fermentum ornare ligula. Integer at posuere magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vel faucibus velit.

Code


<!--'Text align' and 'Line style' options are only available when choosing the red underline layout.-->
<div class="subtitle-block cui {{ red-underline }} {{ text-center }} {{ long-line }}">
    <h2>{{ Section heading }}</h2>
    <hr aria-hidden="true">
</div>

Usage guidelines for subtitle block heading

General guidelines

The subtitle block heading can be used to provide emphasis to sections on a page.

Please DO
  • Do use the Subtitle Block Heading to provide information about the hierarchy of content below the h1 heading
Please DON’T
  • Don't use it as the first level heading on a page.
Please DO
  • For the Subtitle with red underline, do choose a line length that matches closely with the amount of text in the title.
    • Short red underline for short title
    • Long red underline for long title
Please DON’T
  • Don't choose a short red underline for long titles.