---
title: Heading
description: 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.
api_version: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/titles-and-text/heading
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/titles-and-text/heading.md
---

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

## Properties

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

* id

  string

  A unique identifier for the element.

### Examples

* #### Code

  ##### Default

  ```html
  <s-heading>Contact</s-heading>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/heading-default.png)

## Useful 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.

## Considerations

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

## Best 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.