Paragraph

The Paragraph component provides a semantic HTML paragraph element with enhanced typography controls. It offers flexible size adjustments, optional line height trimming and text truncation capabilities to maintain consistent typography across your application.

Semantic HTML p element

Flexible size adjustment

Optional trimming to remove line height

Supports text truncation for long texts

Architecture

so-paragraph
Slot: default

Reference

  • Paragraph

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

    • Attributes

      • id
        string
        / default: -

        A unique identifier for the paragraph element. This can be used for targeting the element with custom styles or scripts or for accessibility purposes.

      • size
        enum
        / default: md

        Controls the text size of the paragraph. Ranges from xs to 6xl, with md being the default size. This allows for flexible typography scaling across different contexts.

      • trim
        enum
        / default: none

        Specifies where to remove excess line height from the paragraph. 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 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