# Blockquote

## Setting Up **Your Blockquote**

### **Add a Title (Optional)**

The title provides context or attribution for the quoted text.

* **What to Enter:** This could be the name of the person being quoted, the source of the quote (e.g., a book, article, or website), or a brief heading summarizing the quote's main point.
* **When to Use:** A title is helpful when the source or context of the quote isn't immediately clear from the quote itself

### Enter the Quote Text

This is the main text you want to highlight using the blockquote style.

* **What to Enter:** 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

### Choose a Style (Variant)

Select a visual style that aligns with the tone and purpose of the quote. The "Variant" setting controls the blockquote's overall appearance.

* **Available Variants:**
  * **Default:** A neutral style suitable for general use. It typically uses indentation and a distinct font to set the quote apart.
  * **Brand:** Applies your brand colors and styling to the blockquote, creating visual consistency with your overall design.
  * **Warning:** Highlights cautionary information or advice. It might use a distinct background color or border to draw attention.
  * **Error:** Emphasizes critical information or errors. It might use a bold font and a strong color like red.
  * **Success:** Draws attention to positive messages or achievements. It might use a visually appealing color like green or blue

### **Add an Icon (Optional)**

Enhance the blockquote's visual impact and meaning by adding a relevant icon.

* **How to Choose:** Select an icon that complements the content of the quote and reinforces its message.
* **Example:** A quote about customer satisfaction could be accompanied by a "thumbs up" or a smiley face icon. A quote about a warning could use an exclamation point icon.
* **Placement:** The icon is typically placed near the quote text, either before or after it, depending on the chosen variant and your design preferences

## **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.
* **Code Snippets:** Display code examples in a visually distinct way.

By incorporating the Blockquote component into your Dynamic Components, you can create engaging and informative user interfaces that effectively highlight important information