Comment on page

Blockquote

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.
Overview
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
Variant
Description
When to Use
Default
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.
Brand
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.
Error
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.
Warning
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.
Success
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.Choose the Setting: Select the setting you want to configure (e.g., Title, Content).
2.Select Mapped Value: In the property editor, choose 'Mapped Value' instead of entering text manually.
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.
Specifications
🎛️ Attributes
🎨 Styling
Name
Type
Description
content
String
Content for the blockquote
iconName
String
Icon displayed to the left or right of the title.
iconPosition
String
Describes the position of the icon. Options include left and right.
iconSize
String
The size of the icon. Valid values include xx-small, x-small, small, medium, large.
title
String
The title can include text and is displayed in the header.
variant
String
The variant changes the appearance of the blockquote. Valid values include default, brand, warning, error, success.
Name
Description
Border Color
Define a border color
Border Radius
Define a border radius
For each variant (Default, Brand, Warning, Error, Success)
Name
Description
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

Variant	Description	When to Use
Default	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.
Brand	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.
Error	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.
Warning	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.
Success	Usually green, symbolizing positivity, completion, or success.	To highlight positive outcomes, achievements, or confirmation of successful task or process completion.

Name	Type	Description
content	String	Content for the blockquote
iconName	String	Icon displayed to the left or right of the title.
iconPosition	String	Describes the position of the icon. Options include left and right.
iconSize	String	The size of the icon. Valid values include `xx-small`, `x-small`, `small`, `medium`, `large`.
title	String	The title can include text and is displayed in the header.
variant	String	The variant changes the appearance of the blockquote. Valid values include `default`, `brand`, `warning`, `error`, `success`.

Name	Description
Border Color	Define a border color
Border Radius	Define a border radius

Name	Description
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