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 "none" | "presentation" | "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 accessibilityVisibility accessibilityVisibility "visible" | "hidden" | "exclusive": Changes the visibility of the element.

visible: the element is visible to all users.

hidden: the element is removed from the accessibility tree but remains visible.

exclusive: the element is visually hidden but remains in the accessibility tree.
Anchor to lineClamp lineClamp number: Truncates the text content to the specified number of lines.

Heading

accessibilityRole
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.
```
"none" | "presentation" | "heading"
```
accessibilityVisibility
Changes the visibility of the element. - `visible`: the element is visible to all users. - `hidden`: the element is removed from the accessibility tree but remains visible. - `exclusive`: the element is visually hidden but remains in the accessibility tree.
```
"visible" | "hidden" | "exclusive"
```
adoptedCallback
```
() => void
```
attributeChangedCallback
```
(name: string) => void
```
click
Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
```
({ sourceEvent }?: ClickOptions) => void
```
connectedCallback
```
() => void
```
disconnectedCallback
```
() => void
```
lineClamp
Truncates the text content to the specified number of lines.
```
number
```
queueRender
Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.
```
() => void
```
setAttribute
```
(name: string, value: string) => void
```

declare class Heading extends PreactCustomElement implements HeadingProps {
  accessor accessibilityRole: HeadingProps['accessibilityRole'];
  accessor lineClamp: HeadingProps['lineClamp'];
  accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];
  constructor();
}

ClickOptions

sourceEvent
The event you want to influence the synthetic click.
```
ActivationEventEsque
```

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

button
```
number
```
ctrlKey
```
boolean
```
metaKey
```
boolean
```
shiftKey
```
boolean
```

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

Was this section helpful?

Code

<s-heading>Online store dashboard</s-heading>

examples

Code

<s-heading>Online store dashboard</s-heading>

<!DOCTYPE html><html><head><style>html, body {height:100%} body {box-sizing: border-box; margin: 0; padding:0.5rem; display: grid; place-items: center; gap: 0.5rem;}</style><script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script></head><body><s-heading>Online store dashboard</s-heading>
</body></html>

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?