1. Design System
  2. Base
  3. Typography
  4. Headings

Headings

Headings act as a title for the content that immediately follows it. The <h1> element is reserved for the page title and must only be used once on a page. If you are using Kentico, this is usually added automatically. Other heading levels may be used more than once following document outline order.

Content headings

Headings in user added content sections (wrapped in a div using either of the classes .cms-content or .content) are automatically styled to the correct font size and styling.

<div class="cms-content">
	<h1>How vexingly quick daft zebras jump!</h1>
	<h2>How vexingly quick daft zebras jump!</h2>
	<h3>How vexingly quick daft zebras jump!</h3>
	<h4>How vexingly quick daft zebras jump!</h4>
	<h5>How vexingly quick daft zebras jump!</h5>
	<h6>How vexingly quick daft zebras jump!</h6>
</div>
<div class="content">
	<h1>How vexingly quick daft zebras jump!</h1>
	<h2>How vexingly quick daft zebras jump!</h2>
	<h3>How vexingly quick daft zebras jump!</h3>
	<h4>How vexingly quick daft zebras jump!</h4>
	<h5>How vexingly quick daft zebras jump!</h5>
	<h6>How vexingly quick daft zebras jump!</h6>
</div>

Template headings

Headings in templates are not in user added content and are styled with inline classes.

<h1 class="is-size-1 font-type-2 has-heading-line">How vexingly quick daft zebras jump!</h1>
<h2 class="is-size-3 has-heading-line">How vexingly quick daft zebras jump!</h2>
<h3 class="is-size-4 m-bottom-20">How vexingly quick daft zebras jump!</h3>
<h4 class="is-size-5 m-bottom-20">How vexingly quick daft zebras jump!</h4>
<h5 class="is-size-6 m-bottom-20">How vexingly quick daft zebras jump!</h5>
<h6 class="is-size-7 m-bottom-20">How vexingly quick daft zebras jump!</h6>

Accessibility

Some screen readers can automatically create a list of headings from a page. This allows users to scan the page content.

Avoid making text all uppercase, content will be harder to read and screen readers sometimes treat this as an acronym and read out every letter.

Never use headings for visual effects only, e.g., to bold text or increase font size.