Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.7)

Note

This page is archived under version 1.7 and is available for reference purposes only. The latest version of Pattern Library is 2.

Headings

Standard headings

h1 to h6 tags are used to define HTML headings. Each heading level contains styles for colours along with responsive font-sizes and vertical margins.

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>

Usage

h1 to h6 headings should be used as a way to break up content and build hierarchy in a block of text. Ideally headings should be used to nest related content. For accessibility reasons, this is preferred to using CSS styling to change the size or style of text.

In terms of accessibility, headings are used to outline the hierarchy of the page. Assistive technologies will be able to use this markup to determine the structure on the page. It is an effective way for screen reader users to quickly find the content they are searching for.

For more information on using headings to create a semantic structure to your page content view, Semantic Structure on WebAIM

The following headings are set inside of an article tag. By default, all headings inside an article tag will have the same line length as a paragraph tag. The value for the line length is specifically chosen to ensure an optimal reading experience by limiting the number of characters per line.

This h1 Heading is inside an article tag

This h2 Heading is inside an article tag

This h3 Heading is inside an article tag

This h4 Heading is inside an article tag

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>

Subtitle block heading

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

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 


<div class="subtitle-block cui">
    <h2>{{ Section heading }}</h2>
    <hr aria-hidden="true">
</div>