> 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/dynamic-components/components/blockquote.md). # Blockquote The Blockquote component highlights quoted or emphasized content within a page. Use it to draw attention to testimonials, key findings, or any text you want to set apart from the surrounding content. ## Overview The Blockquote pairs a header title with rich text body content and offers several contextual variants — from a neutral default to brand, warning, error, and success styles — so the emphasis matches the tone of your message. You can also add an optional icon, with configurable size and position, to reinforce the quote visually. ### Why Use the Blockquote Component? * **Emphasize Key Information:** Draw attention to important quotes, testimonials, or key takeaways. * **Improve Readability:** Break up long blocks of text and make content more visually appealing. * **Enhance Visual Hierarchy:** Create a clear visual structure and guide the reader's eye. * **Add Credibility:** Highlight customer testimonials or expert opinions to build trust. ### Example Use Cases * **Customer Testimonials:** Showcase positive feedback from satisfied customers. * **Key Findings:** Highlight important insights from reports or research. * **Call to Action:** Emphasize a specific message or encourage a particular action. ## Configuration To configure the Blockquote, select it on the canvas. The **Edit Blockquote** panel opens on the right with two tabs: **Properties** and **Style**. The sections below mirror the Properties tab. ### Properties #### Title The **Title** can include text and is displayed in the header of the blockquote. It provides context or attribution for the quoted text — for example, the name of the person being quoted, the source (a book, article, or website), or a brief heading summarizing the quote's main point. A title is most helpful when the source or context of the quote isn't immediately clear from the quote itself. This field is optional. #### Content The **Content** is the main rich text body you want to highlight using the blockquote style. This could be a customer testimonial, a key takeaway from a report, an excerpt from an article, a powerful statement, or any other text you want to emphasize. **Best Practices:** * Keep the quote concise and to the point. * Ensure the quote is relevant to the surrounding content. #### Variant The **Variant** changes the appearance of the blockquote. Select the style that aligns with the tone and purpose of the quote. * **Default:** A neutral style suitable for general use. * **Brand:** Applies your brand colors and styling, creating visual consistency with your overall design. * **Warning:** Highlights cautionary information or advice. * **Error:** Emphasizes critical information or errors. * **Success:** Draws attention to positive messages or achievements. #### Icon Name The **Icon Name** is the Lightning Design System name of an optional icon shown alongside the quote (for example, `utility:success`). Select an icon that complements the content and reinforces its message. This field is optional. #### Icon Size The **Icon Size** controls how large the icon appears. Choose from **Xxs**, **Xs**, **Small** (default), **Medium**, or **Large**. Requires: **Icon Name** is set. #### Icon Position The **Icon Position** describes where the icon sits relative to the quote — **Left** (default) or **Right**. Requires: **Icon Name** is set. ### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). ## Styling The Blockquote offers extensive styling options to help you integrate it seamlessly into your design. Configure them from the **Style** tab of the Edit Blockquote panel. Color controls are set per variant (Default, Brand, Warning, Error, Success). {% tabs %} {% tab title="Margin" %} Controls the *outer* spacing around the entire blockquote. * **Top / Right / Bottom / Left:** Adjust the space on each side of the blockquote. {% endtab %} {% tab title="Padding" %} Controls the *inner* spacing between the content and the blockquote container. * **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 container. * **Color / Size / Style / Radius:** Customize the container border. {% endtab %} {% tab title="Blockquote" %} Sets the blockquote's colors (set per variant: Default, Brand, Warning, Error, Success). * **Background Color:** Set the background color of the blockquote. * **Icon Background Color:** Set the background color behind the icon. * **Icon Foreground Color:** Set the color of the icon itself. {% endtab %} {% tab title="Blockquote Border" %} * **Color / Size / Style / Radius:** Customize the blockquote's border. * **Left Border Color** (set per variant)**, Left Border Size, Left Border Style:** Style the accent border along the left edge. {% endtab %} {% tab title="Title" %} * **Title Color:** Set the color of the title (set per variant). * **Font Size / Font Style / Font Weight:** Adjust the typography of the title. {% endtab %} {% tab title="Content" %} * **Color:** Set the color of the body content text. {% 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, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/blockquote.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.