Heading

Design File

Figma link

Introduction

The heading component is used to add section titles and page headings to the content area. It should be used instead of adding heading elements directly in the WYSIWYG editor, as it ensures consistent typography, spacing, and semantic structure across the site.

Only one H1 heading should exist per page. If a Hero is present, it typically serves as the page title and the Heading component should start at H2.

Component Structure

Variants

There are four variants corresponding to heading levels H1 through H4.

1. H1

The top-level page heading. Use only once per page, and only when a Hero section is not present.

2. H2

Major section heading. The most common heading level for content sections.

3. H3

Sub-section heading. Use beneath an H2 to introduce a sub-topic.

4. H4

Minor section heading. Use beneath an H3 for further subdivision.

Props

Field	Data Type	Requirement	Description	Note
Variant	String	Required	The heading level to render.	Options: h1, h2, h3, h4.
Page Title	Boolean	Optional	Marks this heading as the page title.	Only one page title should exist per page. Defaults to false.
Top Margin	Boolean	Optional	Adds top margin above the heading.	Defaults to true. Uncheck if the heading is the first item in the content area or appears directly below a breadcrumb.
Screen Reader Only	Boolean	Optional	Whether this heading is only for screen readers. This will visually hide the heading but it will still be read by screen readers.	Defaults to false. Only check this option when needed.
Component ID	String	Optional	An ID for the component, useful for in-page anchor linking.

Slots

Field	Data Type	Requirement	Description	Note
Heading Text	String	Required	The heading text.
Link URL	String	Optional	Makes the heading text a link.
Subtitle	String	Optional	A subtitle displayed below the heading text.
Date	Date	Optional	A date displayed with the heading, useful for article or event titles.	Use the format "Month Date, Year" (e.g., "July 4, 2025").