Blockquote

The Blockquote component is used to highlight and style quoted content for proper semantic structure and accessibility. The component supports various color styles and size options to match different design requirements.

Semantic HTML blockquote element

Flexible size adjustment

Customizable color

Supports text truncation for long texts

Architecture

so-blockquote
Slot: default

Reference

  • Blockquote

    Renders a blockquote tag, providing proper semantic structure. It handles the visual presentation and text behavior based on the configured attributes.

    • Attributes

      • color
        enum
        / default: brand

        Sets the blockquote's color theme, with options like brand for primary content, neutral for general quotes and semantic colors for status-specific quotes.

      • id
        string
        / default: -

        A unique identifier for the blockquote element. This can be used for targeting the element with custom styling or scripting.

      • size
        enum
        / default: md

        Controls the text size of the blockquote content. Provides a range of sizes from xs to 6xl to accommodate different design needs and content hierarchies.

      • 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