OctantisWeb.Components.PolarisWC.SHeading (octantis v0.2.0)
View SourceRenders 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.
## Example
<.s_heading>Online store dashboard</.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
headingproperty ins-section. Thes-headingcomponent 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.
## See
Summary
Functions
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.
Functions
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.
## Example
<.s_heading>Online store dashboard</.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
headingproperty ins-section. Thes-headingcomponent 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.
## See
Attributes
accessibility_role(:string) - 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 thepresentationrole.
accessibility_visibility(:string) - 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.
line_clamp(:string) - Truncates the text content to the specified number of lines.Global attributes are accepted.
Slots
inner_block