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>