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.6)

Note

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

Headings

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.

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

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

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

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

heading h5 (16px) Sed posuere consectetur est at lobortis
heading h6 (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>

The following headings are set inside of an article tag. By default, all headings inside an article tag will have a max-width set. These max-widths are responsive and are based off the ideal line-length of 60-75 characters (at 16px font-size). This is the same as how this paragraph’s max-width is set.

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>

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 different levels of a document. This system is useful for screen readers because they can navigate the heading markup. It is an effective way for screen reader users to quickly find the content they are searching for.

Accessibility

Use heading tags to indicate hierarchy on the page. Assistive technologies will be able to use this markup to determine the structure on the page.

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

Subtitle block heading

The subtitle block heading can be used to provide emphasis to sections on a page. The styles contain responsive font-sizes and vertical margins.

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>Heading for the subtitle block goes here</h2>
    <hr>
</div>