4 #Headings Headings

Use <h1> through <h6> for headings. As of version 3.1.0, these headings are styled automatically and do not need classes added.

The page headings should follow a normal outline structure: an <h1> for the page title. Any number of level two headings under that. <h3> headings can be placed under an <h2> heading, and so on.

In cases where you need the headings to appear a different size or style, use the classes .h1 through .h6 to apply specific sizing. This means that <h4> and <p class="h4"> render exactly the same in the browser. Use whichever element is semantically appropriate (<h1>, <h3>, <p>, etc.) and, if necessary, apply a heading class to achieve the necessary visual treatment.

Example

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
<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>

4.1 #Headings.Page-Heading Page Heading

An <h1> (or .h1) will render correctly as a page heading. For very long headings, use the page-heading-long or page-heading-xlong class to reduce the font size and allow more text to fit on a line.

Examples
Default styling

Page Heading

.page-heading-long
Adjust font size down (use for long titles, 40–90 characters)

Page Heading

.page-heading-xlong
Adjust font size down even further (use for very long titles, > 90 characters)

Page Heading

<h1 class="[modifier class]">Page Heading</h1>

4.1.1 #Headings.Page-Heading.Parent Parent page

To add a parent page above the heading, add the page-heading class to a parent container. Then use page-heading-parent to indicate the parent page.

Example
ICE Futures Europe

Market Resources

<div class="page-heading">
  <div class="page-heading-parent">ICE Futures Europe</div>
  <h1>Market Resources</h1> <!-- works as h1, h2, or h3 -->
</div>

4.2 #Headings.Secondary-Heading Secondary Header

There are two versions of this heading: secondary-header and section-header.

These two headers are very similar, with only minor stylistic distinctions. If a header concerns most of the content of the page (i.e. there are only one or two on the page), use Secondary Header. On the other hand, if you have many sections of the page, each with its own title, use Section Header for each title.

Create lighter, set-aside text with a <small> tag or the small class.

Example

Secondary header

Section header

  <h2 class="secondary-header">Secondary header</h2>
  <h2 class="section-header">Section header</h2>
Example

Header with aside Aside

Show Markup
  <h2 class="section-header">Header with aside <small>Aside</small></h2>

4.3 #Headings.Subheader Subheaders

Use subheader for a third-level heading. Use secondary-subheading for a fourth-level heading.

Example

Third level heading

  <h3 class="subheader">Third level heading</h3>
Example

Fourth level heading

Show Markup
  <h4 class="secondary-subheader">Fourth level heading</h4>