Components

Blockquote

Highlight Voices That Matter.

The Blockquote component allows you to visually emphasize quotes, testimonials, or statements, adding depth, credibility, and emotional resonance to your content. Whether you’re showcasing customer feedback, quoting an expert, or adding narrative richness to editorial content, Blockquotes provide a clean and elegant way to stand out.

With full theme support, flexible content blocks, and semantic best practices (like cite attribution), you can make every quote meaningful, both in story and structure.

Bring stories and voices to life

  1. Support narratives with visual breaks.
    Let key statements shine and breathe.

  2. Emotional Impact.
    Boost credibility with real words.

  3. Flexible Content Structure.
    Combine text, images, and layout.

Built for Clarity & Consistency

  1. Use native HTML blockquote tags.
    Automatically link to citation sources.

  2. Apply your brand’s typography and visuals.
    Maintain consistency across layouts.

  3. Reusable & Modular.
    Drop into articles, sections, or pages.

Use Cases

The Blockquote component is a storytelling powerhouse. Use it when you want to highlight quotes, interviews, or testimonials that deserve visual separation and narrative weight.

Common use cases include:

  • Customer testimonials in landing pages

  • Thought leadership quotes in blog posts or whitepapers

  • Press features or endorsements

  • Highlighted expert commentary or product reviews

  • Inspirational quotes in editorial pieces

  • Pull quotes to break up long-form content

The component integrates seamlessly with other components and layouts, letting your readers focus on the message while you ensure design consistency.

Configuration Options & Features

The Blockquote component brings elegance and emotion to your content through structured, styled, and semantically correct quotes. Whether highlighting a customer’s voice or reinforcing a powerful statement, this component ensures the message cuts through, visually and technically.

Your content’s voice is highlighted, validated, and beautifully styled.

Cite

This field allows you to specify the origin URL of the quote or citation. This value is added as the cite attribute in the HTML markup of the <blockquote> element, following best practices for SEO and accessibility.

Example:

  • https://example.com/interview-with-founder

It helps verify the source of the quote and supports the generation of structured content.

Content

The core content of the Blockquote is managed via a nestable container, where you can insert:

  • Text (e.g., quotes, commentary)

  • Images (e.g., author headshots, logos)

  • Component combinations (for layout or spacing)

The Blockquote component provides complete flexibility in styling and visually enriching the quote, including layouts for multi-column or side-by-side formats.

Component Theme

Apply a component theme to match your Blockquote's appearance with the rest of your design system.

Control everything regarding your components' visual design and behaviour, including but not limited to Font style, size, and weight, Quote icon appearance or inclusion, Spacing, alignment, and colors, Border styling, or background accents.

Themes ensure your quotes feel polished and on-brand while staying easy to manage and reuse.