Headings

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.

Note: headings are available as a widget when editing pages.

Preview
Code

How vexingly quick daft zebras jump!

<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 the Rich Text Editor or HTML Widgets are not currently styled to the correct font size and styling. You have to add styling with inline classes. Do not add an h1 to content as you can only have one h1 and this is added automatically to the page title.

Preview
Code

How vexingly quick daft zebras jump!

<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 content on the page.

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, for example, to bold text or increase font size.

If you have any questions or suggestions for improvements, please contact the Web Team.