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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FSBxCbwtMFggTbvdTLGK2%252F2023-11-23_15-33-49.png%3Falt%3Dmedia%26token%3Dd4bdf62a-9563-410d-a9cd-498dd768ba71&width=768&dpr=4&quality=100&sign=7897dee9&sv=1)
How to Apply Mapped Values
Choose the Setting: Select the setting you want to configure (e.g., Title, Content).
Select Mapped Value: In the property editor, choose 'Mapped Value' instead of entering text manually.
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
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 |
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 |
Last updated