Blockquote

Highlight important quotes or text with the Blockquote component. This component allows you to emphasize specific content visually, drawing attention to key information or testimonials.

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