Heading h3

The Heading h3 component provides a semantic HTML h3 element with configurable styling options. It supports various size options, line height trimming capabilities and text truncation features, making it suitable for creating hierarchical and visually consistent headings in your content.

Semantic HTML h3 element

Flexible size adjustment

Optional trimming to remove line height

Supports text truncation for long titles

Architecture

so-heading-h3
Slot: default

Reference

  • Heading h3

    Renders an h3 heading element with configurable styling options. It provides control over the heading's appearance and behavior through various attributes.

    • Attributes

      • id
        string
        / default: -

        A unique identifier for the heading element. This can be used for linking, scripting or styling purposes.

      • size
        enum
        / default: 2xl

        Controls the text size of the heading. Provides a range of predefined sizes from xs to 6xl, with 2xl as the default size.

      • trim
        enum
        / default: none

        Adjusts the line height trimming of the heading. Use start to trim top spacing, end for bottom spacing, both for both or none to maintain default spacing.

      • truncate
        boolean
        / default: false

        When set to true, the heading text will be truncated with an ellipsis if it exceeds the container width. Alternatively, you can specify a number to limit the visible lines before truncation occurs.

made for toddle