Heading h2

The Heading h2 component is used for subheadings or section titles, providing a clear hierarchy beneath the main title. It ensures accessibility and SEO by utilizing the HTML h2 tag.

Semantic HTML h2 element

Flexible size adjustment

Optional trimming to remove line height

Supports text truncation for long titles

Architecture

so-heading-h2
Slot: default

Reference

  • Heading h2

    Renders an h2 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: -

        Sets the HTML id attribute for the heading element. This can be used for linking, scripting or styling purposes.

      • size
        enum
        / default: 3xl

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

      • trim
        enum
        / default: none

        Adjusts excess line height at the top, bottom or both to refine vertical spacing. Use none for default, start for top-only, end for bottom-only or both for trimming both sides.

      • 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