Skip to main content

Heading

Renders hierarchical titles to communicate the structure and organization of page content. Heading levels adjust automatically based on nesting within parent Section components, ensuring a meaningful and accessible page outline.

Anchor to propertiesProperties

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

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

  • heading: defines the element as a heading to a page or section.
  • presentation: the heading level will be stripped, and will prevent the element’s implicit ARIA semantics from being exposed to the accessibility tree.
  • none: a synonym for the presentation role.
Anchor to id
id
string

A unique identifier for the element.

Was this section helpful?

Code

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

Preview

Anchor to useful-forUseful for

  • Creating titles and subtitles for your content that are consistent across your app.
  • Helping users with visual impairments navigate through content effectively using assistive technologies like screen readers.
Was this section helpful?

Anchor to considerationsConsiderations

  • The level of the heading is automatically determined by how deeply it's nested inside other components, starting from h2.
  • Default to using the heading property in s-section. The s-heading component should only be used if you need to implement a custom layout for your heading in the UI.
Was this section helpful?

Anchor to best-practicesBest practices

  • Use short headings to make your content scannable.
  • Use plain and clear terms.
  • Don't use jargon or technical language.
  • Don't use different terms to describe the same thing.
  • Don't duplicate content.
Was this section helpful?