> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/blockquote.md).

# Blockquote

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.

<figure><img src="/files/DthkKIPxRsEWWUwkNSNe" alt="" width="375"><figcaption></figcaption></figure>

***

## 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.

**Icon Position** — places the icon to the Left or Right of the title.

### Using Mapped Values

[Mapped Values](/flow/getting-started/learn-the-basics.md#what-are-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.

<figure><img src="/files/EYnJ5u98sf9v1XmhMWCD" alt=""><figcaption></figcaption></figure>

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.

***

## 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.

{% tabs %}
{% tab title="Margin" %}
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.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the blockquote's content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the blockquote's dimensions.

* **Height / Width:** Set fixed dimensions for the blockquote.
* **Overflow:** Control how content that exceeds the bounds is handled.
  {% endtab %}

{% tab title="Border" %}
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.
  {% endtab %}

{% tab title="Blockquote" %}
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.
  {% endtab %}

{% tab title="Blockquote Border" %}
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.
  {% endtab %}

{% tab title="Title" %}
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.
  {% endtab %}

{% tab title="Content" %}
Styles the blockquote's body text.

* **Color:** Set the content text color.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/blockquote.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.