Heading
The Heading component renders hierarchical titles to communicate the structure and organization of page content and help users navigate complex interfaces.
Heading levels adjust automatically based on nesting within parent Section components, ensuring a meaningful page outline.
Anchor to propertiesProperties
Configure the following properties on the Heading component.
- string
A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.
Display hierarchical headings
<s-heading>Heading (H2)</s-heading>
<s-section>
<s-heading>Heading (H3)</s-heading>
<s-section>
<s-heading>Heading (H4)</s-heading>
</s-section>
</s-section>
Examples
Display hierarchical headings
Description
Create hierarchical titles using a `Heading` component that adjusts levels automatically based on nesting. This example shows a basic heading with automatic level management.
Default
<s-heading>Heading (H2)</s-heading> <s-section> <s-heading>Heading (H3)</s-heading> <s-section> <s-heading>Heading (H4)</s-heading> </s-section> </s-section>
Preview
Anchor to best-practicesBest practices
- Create logical hierarchy: Start with higher-level headings for main sections, nested headings for subsections. Nested sections automatically adjust heading levels.
- Write specific headings: Avoid generic terms like "Details." Use specific descriptions like "Customer Contact Information" or "Transaction Summary."
- Keep text concise: Headings don't truncate, so keep them brief enough to display across different screen sizes.
Was this section helpful?
Was this page helpful?