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

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

```

## Properties

### HeadingProps

### accessibilityRole

value: `"heading" | ExtractStrict<AccessibilityRole, "presentation" | "none">`

  - ExtractStrict: 
  - AccessibilityRole: "main" | "header" | "footer" | "section" | "aside" | "navigation" | "ordered-list" | "list-item" | "list-item-separator" | "unordered-list" | "separator" | "status" | "alert" | "generic" | "presentation" | "none"
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

value: `string`

A unique identifier for the element.