---
title: Heading
description: |-
  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](/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/layout-and-structure/section) components, ensuring meaningful and accessible page outlines without manual level management.
api_version: 2026-01
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/typography-and-content/heading
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/typography-and-content/heading.md
---

# 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](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/layout-and-structure/section) components, ensuring meaningful and accessible page outlines without manual level management.

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

## Preview

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

### Examples

* #### Code

  ##### Default

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

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