Headers

Headers are used to organize content and provide readers with a succinct description of the information contained in a content area. Headers are also crucial to SEO and can be used by assistive technologies to create in-page navigation. Properly-formatted headers are always preferable to bold or plain text. You can insert headers using the Paragraph Style dropdown in the Rich Text Editor, or via HTML (see usage examples below).

This design supports six heading levels, which are controlled by the <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags.

Levels 1 and 2 are used on global elements, and several templates also incorporate level 3. For a true hierarchy of content, you should use levels 4–6 in your formatting.

Styles

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6
Usage
<h1>Heading level 1</h1>

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<h5>Heading level 5</h5>

<h6>Heading level 6</h6>


Subheaders

You can lighten up your headers and create visual contrast by adding a class of .subheader to any header element.

Styles

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader
h6.subheader
Usage
<h1 class="subheader">h1.subheader</h1>

<h2 class="subheader">h2.subheader</h2>

<h3 class="subheader">h3.subheader</h3>

<h4 class="subheader">h4.subheader</h4>

<h5 class="subheader">h5.subheader</h5>

<h6 class="subheader">h6.subheader</h6>