Skip to main content

Heading

The heading component renders hierarchical titles to communicate the structure and organization of page content. Use heading to create section titles and content headers that help users understand information hierarchy and navigate content.

Heading levels adjust automatically based on nesting within parent section components, ensuring meaningful and accessible page outlines without manual level management.

Heading levels (h2, h3, h4) are determined automatically by nesting depth within s-section components — you can't set a specific heading level directly.

Support
Targets (24)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the heading component.

Anchor to accessibilityRole
accessibilityRole
'heading' | 'none' | 'presentation'
Default: 'heading'

The semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.

  • presentation: Removes semantic meaning, making the element purely decorative and ignored by screen readers.
  • none: Completely hides the element and its content from assistive technologies.
Anchor to id
id
string

A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Anchor to ExamplesExamples

Anchor to Add a basic headingAdd a basic heading

Create a heading for a content section. This example shows the basic heading component with default styling.

Add a basic heading

A heading element displaying the text Contact in a bold, larger font size.

html

<s-heading>Contact</s-heading>

Anchor to Set an accessibility roleSet an accessibility role

Control how assistive technologies interpret the heading. This example sets accessibilityRole="presentation" to render the heading as a visual title without adding it to the document outline.

html

<s-heading accessibilityRole="presentation">Order summary</s-heading>

Anchor to Create a heading hierarchy with nested sectionsCreate a heading hierarchy with nested sections

Nest headings inside section components to automatically assign appropriate heading levels (h2, h3, h4). This example shows how the heading level increments with each nested section, creating proper document structure for screen readers.

html

<s-section>
<s-heading>Order information</s-heading>
<s-section>
<s-heading>Shipping details</s-heading>
<s-section>
<s-heading>Tracking updates</s-heading>
</s-section>
</s-section>
</s-section>

Anchor to Best practicesBest practices

  • Keep headings short: Use concise, scannable titles so customers can quickly orient themselves in the customer account.
  • Prefer section headings: Default to the heading property on s-section and only use s-heading when you need a custom layout.
  • Write clear, descriptive headings: Headings should clearly describe the section they introduce. Avoid vague headings like "Details" when "Order details" or "Profile settings" would be clearer.
Was this page helpful?