Heading h1

The Heading h1 component represents the highest level heading, used for the main titles or sections. It ensures proper semantic structure and accessibility by using the HTML h1 tag, which is crucial for screen readers and SEO.

Semantic HTML h1 element

Flexible size adjustment

Optional trimming to remove line height

Supports text truncation for long titles

Architecture

so-heading-h1
Slot: default

Reference

  • Heading h1

    Renders an HTML h1 element with configurable styling options. It provides control over text size, line height, trimming, and truncation behavior.

    • Attributes

      • id
        string
        / default: -

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

      • size
        enum
        / default: 4xl

        Determines the text size of the heading. Offers a range of predefined sizes from xs to 6xl to accommodate different design needs.

      • trim
        enum
        / default: none

        Controls the removal of excess line height at the start and/or end of the heading. This helps achieve precise vertical spacing in layouts. Use none for default spacing, start or end for single-sided trimming or both for trimming both sides.

      • truncate
        boolean
        / default: false

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

made for toddle