Subheading

The Subheading component is used to add subheads between other components on pages or inside component placeholder areas. The size of the subhead can be changed depending on where it is in the content, from an H2 to an H6 size. Subhead usage should follow a logical hierarchy, with main subdivisions on a page having H2 subheads, subsections under an H2 would use H3s and so on. Subhead sizes should not be selected for style reasons.

Examples of the subhead sizes:

H2 subhead (shown with line)

H3 subhead

H4 subhead

H5 subhead

H6 subhead

Component Information

Benefits

Subheadings help provide consistent visual formatting of varying levels to text across a website.
Subheadings automatically add the appropriate heading class tag (H2 through H6) to content.
Subheadings help visually break up content and make it easier for readers to scan and read more easily.
Subheadings help visitors using screen readers to navigate through the webpage text blocks.
Subheadings also support search engine optimization. Search engine crawlers use subheading tags to understand the content on a webpage and the structure of the data.

Component Options and Limitations

The Subheading component allows users to apply formatting and header tags for levels H2 through H6.
To apply an H1 heading level, use a Page Title component or the Heading 1 formatting option in the rich text editor toolbar.
H2 subheadings may have a green line under the text. This is optional.
The green line is not available for H3 through H6.

Guidelines

As a best practice, use a Subheading component or the Heading formatting option in the rich text editor toolbar to create subheadings. This will apply consistent text formatting for the heading level on the page and will add the proper heading tags to the content. Using the font options to change font size and weight does not apply the proper tags and does not meet accessibility needs related to headings.
An H1 level heading should only be used for a page title.

Component fields

Title (single line text)

Text that appears in the subheading

Advanced Styling fields

Heading style (dropdown)

Options:
- H2
- H3
- H4
- H5
- H6

Page Anchor ID (single line text)

Add text to create an anchor.
Linking to an anchor will open a webpage with the page scrolled to that point on the webpage.

Show line (checkbox)

Checking this box on an H2 style will add a green line below the text

Instructions for Use

Add a Subheading to a Page

In Page Builder:

Select the page in the site tree.
Click the “+” button in the placeholder for the subhead.
Select Subheading component from the list.

Alternate method:

Select the page in the site tree.
Click the Components tab at top of the left pane.
Locate the Subheading component.
Drag the Subheading component to placeholder in the right-side column.

Note: If using a Subheading inside of a component that already has a subhead, be sure to set it at a lower subhead level for clarity.

Add/Edit Subheading Text

In Page Builder:

Click on the Title text in the Subheading component (will display "[No text in field]" if new).
Make desired edits to the text.
In the right pane, click Design Tab and then click to expand Advanced Styling.
Choose a heading level from the Heading Style dropdown. Subheading should follow a sequential order when nested. For example, a page should not jump from an H2 to and H4. Heading styles are to be used for design styling. They serve a specific purpose for page content structuring and supporting accessibility with screen reader technology.

Optional: Subheading text can also be added/edited in the Content Editor or Page Builder's Content mode by adding text to, or editing the text in, the subheading’s Title field.

Additional Options

Show/hide horizontal line (H2 only):

Select the Page Title component.
In the right pane, click Design Tab and then click to expand Advanced Styling.
Check/Uncheck the Show Line check box to show/hide the small, green horizontal line.

Set an anchor link on the Subheading:

Select the Page Title component.
In the right pane, click Design Tab and then click to expand Advanced Styling.
Add the desired anchor text to the PAGE ANCHOR ID field (alphanumeric characters with no spaces).
Once set, the Subheading can be the target of an anchor link using the PAGE ANCHOR ID (by adding "#[PAGE ANCHOR ID]" to the end of the page URL).

Tool Use Guide

Documentation updated: June 12, 2026

Is there an issue with this documentation? Report it here.