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 buyers 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.

Support
Targets (29)

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 section headingAdd a section heading

Add a section heading to organize content visually. This example displays an s-heading element with "Contact" as the heading text.

Add a section heading

A rendered example of the heading component

html

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

Anchor to Use presentation role for visual-only headingsUse presentation role for visual-only headings

Suppress heading semantics when a parent region already exposes the heading level. This example sets accessibilityRole="presentation" so the element reads as a visual title only.

html

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

Anchor to Nest headings with sectionsNest headings with sections

Let heading levels adjust automatically based on section nesting depth. This example nests s-heading elements inside s-section containers so each level increments without setting level manually.

html

<s-section heading="Order summary">
<s-heading>Items</s-heading>
<s-text>3 products in your cart</s-text>
<s-section heading="Shipping details">
<s-heading>Delivery estimate</s-heading>
<s-text>3-5 business days</s-text>
</s-section>
</s-section>

Anchor to Best practicesBest practices

  • Keep headings short: Use concise, scannable titles so buyers can quickly orient themselves in the checkout flow.
  • Prefer section headings: Default to the heading property on s-section and only use s-heading when you need a custom layout.
  • Avoid skipping levels arbitrarily: Screen readers use heading levels to build a navigable document outline. Jumping from h2 to h4 creates gaps that make it harder for buyers using assistive technology to navigate the page.
Was this page helpful?