Styles the blockquote's body text.
Color: Set the content text color.
Blockquote
The Avonni Blockquote provides a visually distinct way to highlight quotes and excerpts in Salesforce Flow screens, improving readability and emphasis.
The Avonni Blockquote highlights quoted or emphasized content in a visually distinct container. Use it to draw attention to a key message, policy excerpt, or instructional note on a Flow screen.
Overview
The Blockquote renders a styled callout box with an optional title, rich text body, and an icon. Five variants let you communicate the tone of the content — from neutral to success or error.
Configuration
To configure it, click the component on the Flow screen. The Edit Blockquote Component panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.
Properties
Title — the heading displayed at the top of the blockquote.
Content — the main body text. Rich text formatting is supported.
Variant — controls the visual style:
Variant
Description
When to Use
Default
Standard style with no specific connotation.
General quotes or text that don't need special attention.
Brand
Uses your organization's branding colors.
Messages that align with your brand's identity or values.
Warning
Yellow/orange tones — caution without severity.
Non-critical alerts or gentle reminders.
Error
Red tones — draws immediate attention.
Mistakes, issues, or warnings requiring immediate action.
Success
Green tones — positive outcome.
Confirmations, achievements, or successful completions.
Icon Name — adds a Lightning Design System icon to the blockquote for additional emphasis. Specify in the format utility:info.
Icon Size — controls how large the icon appears: XX-Small, X-Small, Small, Medium, or Large. Requires Icon Name to be set.
Icon Position — places the icon to the Left or Right of the title. Requires Icon Name to be set.
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.
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.
Styling
The Style tab gives you fine-grained control over the Blockquote's appearance, overriding the default variant styles. Configure it from the Style tab of the Edit Blockquote panel.
Controls the outer spacing around the blockquote, creating space between it and other elements on the screen.
Top / Right / Bottom / Left: Adjust the space on each side of the blockquote.
Controls the inner spacing between the blockquote's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the border surrounding the blockquote.
Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Controls the blockquote's dimensions.
Height / Width: Set fixed dimensions for the blockquote.
Overflow: Control how content that exceeds the bounds is handled.
Sets the blockquote's background and icon colors. Colors are set per variant (Default, Brand, Warning, Error, Success).
Background Color: Set the blockquote's background color.
Icon Background Color: Set the icon's background color.
Icon Foreground Color: Set the icon's color.
Customizes the blockquote's border and its distinctive left accent border. The left border color is set per variant (Default, Brand, Warning, Error, Success).
Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Left Border Color: Set the color of the left accent border.
Left Border Size: Adjust the thickness of the left accent border.
Left Border Style: Choose a style for the left accent border.
Styles the blockquote's title text. Title Color is set per variant (Default, Brand, Warning, Error, Success).
Title Color: Set the title color.
Font Size / Font Style / Font Weight: Control the title typography.
Last updated
Was this helpful?