Components

Heading

Displays heading text in multiple sizes

Overview

  • Available since: New York
  • A11Y: WCAG 2.1 AA

Headings are the textual elements that organize content hierarchically and guide users through a page. They anchor sections and subsections, making content digestible.

ServiceNow link
Heading code documentation

UIB and developer guidance

Figma link
Heading Figma component

Horizon components and styles library

Loading playground

When to use

Use headings to structure your content clearly. They're essential for readability and accessibility, helping users understand the organization of your content.

When not to use

Avoid using headings just for styling text. If the text isn't serving as a title or section marker, consider other styling options. Keep headings for their intended purpose of structuring content.

Anatomy

Anatomy displaying the Primary header variant.
  1. Header: Primary heading variant

Subcomponents

See usage guidance for tooltip

Usage

Use the header type for labeling sections in a display, and the title type for labeling content.

Variants

Heading has two different types, header and title. Each has their own variants.

The following are the available header variants: hero, primary, secondary, and tertiary. The default sizes for the now-heading type hierarchy were reduced by one scale to improve data density in a Workspace. Use the hero font size when a larger heading is preferred.

Hero

Use the hero variant as an alternative for the primary variant to display a larger page title size. Page titles indicate the topic or theme of a specific page. Use only one title per page.

Primary

Use the primary variant for page titles. Page titles indicate the topic or theme of a specific page. Use only one title per page.

Primary header example.

Secondary

Use the secondary variant for section headers. Section headers, also called "subtitles", complement the title of the page. Use section headers for content under the title.

Primary header example.

Tertiary

Use the tertiary variant for subsection headers. Subsection headers group similar content to provide context.

Primary header example.

Title

The following are the available title variants: primary, secondary, and tertiary. The size is the same for all title variants, however, the styling for each is different.

Primary

Use the primary variant to grab the user's attention and identify the main purpose content.

Example of primary variant.

This card heading uses a primary title to identify and highlight primary content for the user.

Secondary

Use a secondary variant to create scannable titles that don't compete with the primary title. They're distinguishable within the hierarchy and help group content together.

Example of Secondary variant.

In this example, “Card Category” is a secondary variant of title.

Tertiary

Use a tertiary variant for titles and information that are less important, predictable, or predefined. If something doesn't need additional context, use a tertiary title.

Example of Tertiary variant.

In this example, “Abel Tutor” is a tertiary variant of title.

Configurations

Learn how to customize heading by configuring the available properties.

Presets and controllers

This component contains a preset configuration that automatically configures properties and event handlers for a component, making the component ready to work when you add it to a page. A preset is designed to suit a specific use case. However, you can override preset property values with a custom configuration if you find it necessary for your design. Preset values that you override aren’t upgraded when updates are available. If you don’t want to use the preset values provided, select the option to configure the component manually. You can apply one preset to a single instance of a component on a page. For more information, see Presets.

A preset is always associated with a controller, which acts as a data resource for the component. Controllers provide the configuration data and event bindings the component needs to function in your experience. By selecting a preset, the required controller is added to the page. By adding a controller to the page, any new applicable components will have that controller's preset. For more information about how controllers work, see Controllers. For instructions on using the data inspector to view the default presets for a component, see View properties and events in the Controller API.

Design recommendations

Learn how to apply heading in your design.

UI text guidelines

These are some recommendations for using heading:

  • Use headings to describe the purpose or task to be done on a page, screen, or specific area
  • Keep headings short to improve scanning
  • As you arrange headings, consider the hierarchy on the page or screen and think about how everything is connected
  • Adding a brief description underneath a heading can help explain the page or section in further detail

Behavior

Learn how heading behaves when the display changes or when a user interacts with the component.

Truncation

When the heading doesn't fit in a container, it truncates with an ellipsis. A tooltip appears on hover to show the full text.

Note: An option in the user Preferences menu on the OS sets a tab stop on non-interactive text that truncates in this component, such as a title or label, and makes that text a tooltip trigger. The user presses Enter or the spacebar to open the tooltip and view the entire content. To enable this feature, set the Enable keyboard focus on truncated text option to true in the Accessibility panel of the Preferences menu.