Skip navigation links

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.

Instructions for Use

Add a Subheading to a Page

In Pages:

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

Alternate method: 

  1. Select the page in the site tree.
  2. Click the Components tab at top of the left pane.
  3. Locate the Subheading component. 
  4. 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 Pages:

  1. Click on the Title text in the Subheading component (will display "[No text in field]" if new).
  2. Make desired edits to the text.
Optional: Subheading text can also be added/edited in the Content Editor or Explorer by adding text to, or editing the text in, the subheading’s Title field.

Additional Options

Show/hide horizontal line (H2 only):

  1. Select the Page Title component.
  2. In the right pane, go to Component Options > Advanced Styling.
  3. Check/Uncheck the Show Line check box to show/hide the small, green horizontal line.

Set an anchor link on the Subheading:

  1. Select the Page Title component.
  2. In the right pane, go to Component Options > Advanced Styling. 
  3. Add the desired anchor text to the PAGE ANCHOR ID field (alphanumeric characters with no spaces).
  4. 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

 

 PagesExplorerContent Editor
Add component to pageOptimal  
Add/edit text in subheadingOptimalPossiblePossible
Select style (H2 through H6)Optimal  
Show green line (H2 only)Optimal  

 

Documentation updated: Sept. 16, 2024