Heading h4

The Heading h4 component provides a semantic HTML h4 element with customizable styling options. It supports various size configurations, line height adjustments and text truncation for creating hierarchical content structure and consistent typography.

Semantic HTML h4 element

Flexible size adjustment

Optional trimming to remove line height

Supports text truncation for long titles

Architecture

so-heading-h4
Slot: default

Reference

  • Heading h4

    Renders an h4 heading element. It supports various text styling and handling options through its attributes, allowing for flexible typography control while maintaining semantic structure.

    • Attributes

      • id
        string
        / default: -

        A unique identifier for the heading element. This can be used for linking or referencing the heading within the document.

      • size
        enum
        / default: xl

        Determines the text size of the heading. Ranges from xs to 6xl, with xl as the default size.

      • trim
        enum
        / default: none

        Controls the removal of excess line height at the start and/or end of the heading. Use start to trim top spacing, end for bottom spacing or both for both.

      • 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