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

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.

🎨 Styling

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