Comment on page


The blockquote element is used to indicate the quotation of a large section of text from another source.
The Blockquote is also available as an Experience Cloud Component.


The Blockquote Component allows users to add blockquotes to their content. A blockquote is a formatting element in HTML used to indicate a quote or excerpt from another source. It is typically displayed as indented text with a visual styling to distinguish it from the surrounding text.
Overall, the Blockquote Flow Component is valuable for allowing users to add quotes or excerpts from other sources to their content clearly and visually.

Configuring the Blockquote

The Avonni Blockquote Component enhances your screen flows by enabling the addition of visually distinct blockquotes. Here’s how you can easily configure it:

Available Settings

  • Title: Sets the title of the blockquote.
  • Content: Determines the main text of the blockquote.
  • Variant: Change the visual style of the blockquote.

Blockquote Variants: Descriptions and Usage Guidelines

When to Use
Standard style for the blockquote, with no specific connotations. Suitable for general use.
For regular quotes or text that don’t need special attention or don’t fit into other specific categories.
Aligns with your organization’s branding colors or themes. Designed to stand out while matching your brand's look and feel.
To emphasize messages or quotes that are aligned with your brand’s identity or values.
Features colors like red, indicating problems or issues. Draws attention and signals caution.
To highlight mistakes, issues, or important warnings requiring immediate attention or action.
Characterized by yellow or orange colors, denotes caution but less severe than the error variant.
For messages that alert or caution the reader about non-critical issues, like gentle reminders.
Usually green, symbolizing positivity, completion, or success.
To highlight positive outcomes, achievements, or confirmation of successful task or process completion.
  • Icon Name: Add an icon to the blockquote for additional emphasis or symbolism
  • Size: Adjust the size of the blockquote (e.g., small, medium, large).

Using Mapped Values

Mapped Values allow dynamic configuration based on variables available in your flow. This feature is handy for creating responsive content that changes according to the flow's context.

How to Apply Mapped Values

  1. 1.
    Choose the Setting: Select the setting you want to configure (e.g., Title, Content).
  2. 2.
    Select Mapped Value: In the property editor, choose 'Mapped Value' instead of entering text manually.
  3. 3.
    Pick a Variable: Choose a flow variable that holds the data you want to display in the blockquote.
Using Mapped Values, your blockquotes can dynamically reflect the content based on the flow’s current state, making your screen flows more interactive and contextually relevant.


🎛️ Attributes
🎨 Styling
Content for the blockquote
Icon displayed to the left or right of the title.
Describes the position of the icon. Options include left and right.
The size of the icon. Valid values include xx-small, x-small, small, medium, large.
The title can include text and is displayed in the header.
The variant changes the appearance of the blockquote. Valid values include default, brand, warning, error, success.
Border Color
Define a border color
Border Radius
Define a border radius

For each variant (Default, Brand, Warning, Error, Success)

Title Color
Define a title color
Background Color
Define a background color for the blockquote
Border Left Color
Define a border left color
Icon Background Color
Define an icon background color
Icon Foreground Color
Define an icon foreground color
Icon Foreground Color Default
Define an icon foreground color
Last modified 11d ago