OctantisWeb.Components.PolarisWC.SHeading (octantis v0.2.0)

View Source

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

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

s_heading(assigns)

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

## 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 the presentation role.
  • 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