Em

The Em component provides semantic emphasis for text content using the HTML em element. It supports size adjustments, line height trimming and text truncation, ensuring flexibility and proper document semantics.

Semantic HTML em element

Flexible size adjustment

Optional trimming to remove line height

Supports text truncation for long texts

Architecture

so-em
Slot: default

Reference

  • Em

    Renders a semantic HTML em element. It handles text formatting, size adjustments and various display options.

    • Attributes

      • id
        string
        / default: -

        A unique identifier for the em component. This can be used for targeting the element with custom styles or scripts.

      • size
        enum
        / default: md

        Determines the text size of the emphasized content. Ranges from xs to 6xl, with md being the default size.

      • trim
        enum
        / default: none

        Controls the removal of excess line height at the start, end or both edges of the text. This helps achieve precise vertical alignment when needed.

      • truncate
        boolean
        / default: false

        When set to true, the 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