Loading…
Loading…
Highlights a quotation or excerpt with distinctive visual styling.
The Blockquote component provides a visually distinguished container for quotations, excerpts, and highlighted passages. It wraps the native HTML <blockquote> element with consistent styling, optional citation attribution, and design-system-appropriate visual treatments like left borders, background tints, or typographic shifts.
Blockquotes serve a dual purpose: semantic and visual. Semantically, the <blockquote> element tells assistive technologies and search engines that the enclosed text is a quotation from another source. Visually, the component draws the reader's eye to important passages, testimonials, or pull quotes — making content scannable and engaging.
When to use a Blockquote:
When NOT to use a Blockquote:
margin or a layout component like Stack<em> or <strong>Typography is central to blockquote design. Use the Font Explorer to experiment with typeface pairings — a serif body with an italic blockquote creates a classic editorial feel, while a monospace blockquote in a sans-serif context creates a technical, documentary tone. Always verify text contrast with the Contrast Checker to ensure readability at the typically larger or lighter font weights used in blockquotes.
| Variant | Purpose | Visual Treatment |
|---|---|---|
| Standard | General-purpose quotation with left border | 3–4px left border in brand or accent color, left padding, slightly larger or italic font |
| Pull Quote | Editorial highlight in magazine-style layouts | Centered text, oversized font, decorative quotation marks, no border |
| Testimonial | User or customer testimonial cards | Background fill, avatar + name + role below, rounded corners |
| Alert Quote | Quoting policy, legal text, or warnings | Tinted background matching severity color, icon prefix |
| Inline | Short in-line quotation within paragraph flow | Subtle background or font shift, no structural separation |
| Embellishment | Implementation | Effect |
|---|---|---|
| Left Border | border-left: 4px solid var(--color-primary-400) | Classic editorial feel. Most recognizable blockquote pattern. |
| Quotation Marks | CSS ::before pseudo-element with content: "\201C" | Decorative oversized opening quote mark |
| Background Tint | background: var(--color-surface-secondary) | Separates quote from surrounding content |
| Icon | Leading icon (e.g., quote icon, info icon) | Adds context to the quotation type |
| Typography Shift | Italic serif at 1.25× base size | Creates contrast with body text. Preview type pairings with the Font Explorer. |
| Size | Font Size | Padding | Use Case |
|---|---|---|---|
| Small | 0.875rem | 12px 16px | Inline references, footnotes |
| Medium | 1rem | 16px 24px | Standard body content quotation |
| Large | 1.25rem | 24px 32px | Pull quotes, hero testimonials |
| Property | Type | Default | Description |
|---|---|---|---|
variant | 'standard' | 'pull-quote' | 'testimonial' | 'alert' | 'standard' | Visual treatment style |
size | 'sm' | 'md' | 'lg' | 'md' | Controls font size and padding |
cite | string | — | URL of the quoted source (rendered as the cite attribute on <blockquote>) |
author | string | — | Name of the quoted person or source |
role | string | — | Author's title or role (e.g., "CEO, Acme Inc.") |
avatar | string | — | URL to author avatar image (testimonial variant) |
showQuoteMarks | boolean | false | Renders decorative quotation marks via CSS pseudo-elements |
borderColor | string | — | Override for the left border color token |
icon | ReactNode | — | Optional leading icon |
children | ReactNode | — | The quoted content |
Important: The HTML cite attribute on <blockquote> takes a URL, not a human-readable name. For visible attribution, use the <footer> with a <cite> element inside the blockquote. This is one of the most commonly misunderstood HTML semantics.
| Token Category | Token Example | Blockquote Usage |
|---|---|---|
| Color – Border | --color-primary-400 | Left border accent color |
| Color – Background | --color-surface-secondary | Tinted background for testimonial/alert variants |
| Color – Text | --color-text-secondary | Quote text, typically softer than body text |
| Color – Citation | --color-text-tertiary | Author name and role text |
| Typography – Family | --font-family-serif | Optional serif font for editorial feel. Explore with Font Explorer. |
| Typography – Size | --font-size-lg | Pull quote text sizing |
| Typography – Style | font-style: italic | Standard variant italic treatment |
| Typography – Weight | --font-weight-medium | Attribution text weight |
| Spacing – Padding | --space-4 / --space-6 | Internal padding per size variant |
| Spacing – Margin | --space-6 | Vertical margin to separate from surrounding content |
| Border – Width | --border-width-thick (4px) | Left border thickness |
| Border – Radius | --radius-sm | Corner rounding for testimonial cards |
Blockquotes rely heavily on typography tokens. A well-designed blockquote typically shifts at least two typographic properties from body text — font family (serif vs sans-serif), style (italic), size (larger), or weight (lighter) — to create visual distinction without color alone.
Unlike interactive components, blockquotes are primarily static content elements. However, they do have relevant states in certain contexts:
| State | Visual Treatment | Notes |
|---|---|---|
| Default | Standard rendering with border/background per variant | The resting visual state |
| Loading (Skeleton) | Animated shimmer placeholder matching quote dimensions | Used when quote content loads asynchronously (testimonial feeds) |
| Truncated | Text clamped with "Read more" expansion trigger | For long testimonials in card layouts. Use -webkit-line-clamp or JS. |
| Highlighted | Enhanced background or border glow | When linked to from a citation or footnote reference |
| High-contrast, no background tint, visible border | Ensure blockquotes remain distinguishable in print stylesheets |
When blockquotes appear in testimonial carousels or slideshows:
| State | Behavior |
|---|---|
| Active | Currently visible testimonial — full opacity, scaled to 100% |
| Inactive | Adjacent testimonials — reduced opacity (0.5), scaled down (95%) |
| Entering | Slide-in with fade, respects prefers-reduced-motion |
| Exiting | Slide-out with fade |
Blockquotes carry specific accessibility requirements around semantic markup, attribution, and visual contrast.
Semantic Structure (WCAG 1.3.1 – Info and Relationships):
<blockquote> element — screen readers announce it as a "blockquote" landmark, helping users understand the content structure<footer> within the blockquote, with the source name wrapped in a <cite> element<q> instead of <blockquote> — browsers add language-appropriate quotation marks automaticallyColor Contrast (WCAG 1.4.3 – Contrast Minimum):
color-text-secondary). Verify it meets 4.5:1 against the background — including any tinted blockquote backgrounds. Use the Contrast Checker.color-text-tertiary) frequently fails contrast. Test it.Content Distinction (WCAG 1.3.3 – Sensory Characteristics):
Quotation Marks and Screen Readers:
::before { content: "\201C" } are read by some screen readers. Add aria-hidden="true" to the pseudo-element's parent span, or use a background image instead<q> element automatically adds quotation marks — don't double them by adding manual quotes in the text contentLanguage (WCAG 3.1.2 – Language of Parts):
lang attribute: <blockquote lang="fr"> — this ensures screen readers switch pronunciation rulesKeyboard Navigation:
<button> with keyboard accesscite attribute, consider adding a visible link — cite is not exposed to users by browsersDo:
<blockquote> for actual quotations, not for visual indentation or emphasis<footer> and <cite> elements within the blockquotecite attribute to the source URL when available (for machines, not humans)Don't:
<blockquote> text content without wrapping it in <footer> — screen readers will read attribution as part of the quote<!-- Standard blockquote with left border -->
<blockquote class="blockquote" cite="https://example.com/source">
<p>Design is not just what it looks like and feels like. Design is how it works.</p>
<footer class="blockquote-footer">
— <cite>Steve Jobs</cite>, 2003
</footer>
</blockquote>
<!-- Pull quote variant -->
<blockquote class="blockquote blockquote--pull">
<p>The details are not the details. They make the design.</p>
<footer class="blockquote-footer">
— <cite>Charles Eames</cite>
</footer>
</blockquote>
<!-- Testimonial variant with avatar -->
<figure class="blockquote blockquote--testimonial">
<blockquote>
<p>Switching to this design system cut our development time in half.</p>
</blockquote>
<figcaption class="blockquote-attribution">
<img src="/avatars/jane.jpg" alt="" class="blockquote-avatar" />
<div>
<cite class="blockquote-author">Jane Smith</cite>
<span class="blockquote-role">VP of Engineering, Acme Corp</span>
</div>
</figcaption>
</figure>
<style>
.blockquote {
border-left: 4px solid var(--color-primary-400);
padding: 16px 24px;
margin: 24px 0;
font-style: italic;
color: var(--color-text-secondary);
}
.blockquote p {
margin: 0 0 8px 0;
}
.blockquote-footer {
font-style: normal;
font-size: 0.875rem;
color: var(--color-text-tertiary);
}
.blockquote--pull {
border-left: none;
text-align: center;
font-size: 1.5rem;
font-weight: 300;
font-style: normal;
position: relative;
padding: 32px;
}
.blockquote--pull::before {
content: "\201C";
font-size: 4rem;
color: var(--color-primary-200);
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
line-height: 1;
}
.blockquote--testimonial {
border-left: none;
background: var(--color-surface-secondary);
border-radius: 12px;
padding: 24px;
}
.blockquote-attribution {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
}
.blockquote-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.blockquote-author {
display: block;
font-style: normal;
font-weight: 600;
}
.blockquote-role {
font-size: 0.875rem;
color: var(--color-text-tertiary);
}
</style>import React from 'react';
import styles from './Blockquote.module.css';
import clsx from 'clsx';
interface BlockquoteProps {
variant?: 'standard' | 'pull-quote' | 'testimonial' | 'alert';
size?: 'sm' | 'md' | 'lg';
cite?: string;
author?: string;
role?: string;
avatar?: string;
showQuoteMarks?: boolean;
icon?: React.ReactNode;
children: React.ReactNode;
}
export function Blockquote({
variant = 'standard',
size = 'md',
cite,
author,
role,
avatar,
showQuoteMarks = false,
icon,
children,
}: BlockquoteProps) {
const Wrapper = variant === 'testimonial' ? 'figure' : 'div';
return (
<Wrapper className={clsx(styles.root, styles[variant], styles[size])}>
<blockquote cite={cite} className={styles.quote}>
{icon && <span className={styles.icon} aria-hidden="true">{icon}</span>}
{showQuoteMarks && (
<span className={styles.quoteMark} aria-hidden="true">"</span>
)}
<div className={styles.content}>{children}</div>
</blockquote>
{author && (
variant === 'testimonial' ? (
<figcaption className={styles.attribution}>
{avatar && (
<img src={avatar} alt="" className={styles.avatar} />
)}
<div>
<cite className={styles.author}>{author}</cite>
{role && <span className={styles.role}>{role}</span>}
</div>
</figcaption>
) : (
<footer className={styles.footer}>
— <cite>{author}</cite>{role && `, ${role}`}
</footer>
)
)}
</Wrapper>
);
}Material Design (MUI) does not provide a dedicated Blockquote component. Developers typically compose one using <Typography> with the component="blockquote" prop. MUI's default theme does not include blockquote-specific tokens, so teams must extend the theme with custom variants. The <Typography variant="h6" component="blockquote"> pattern is commonly used, with manual styling for borders and padding.
Ant Design provides no Blockquote component. The <Typography.Paragraph> component can render as <blockquote> using the component prop. Ant's typography.less styles include basic blockquote CSS: left border, padding, and muted color. However, there are no variant props — teams must create custom components for pull quotes or testimonials.
Chakra UI does not have a Blockquote component, but the community-maintained @chakra-ui/prose plugin styles native <blockquote> elements with left borders, italic text, and appropriate spacing within prose content. For standalone use, developers compose with <Box as="blockquote"> combined with style props for border, padding, and typography.
Bootstrap styles <blockquote> via the .blockquote class (removes default browser margin, sets font-size to 1.25rem) and .blockquote-footer for attribution. Bootstrap 5 removed the left border that Bootstrap 3/4 included by default — teams must add it manually. The .blockquote class is intentionally minimal, encouraging project-specific customization.
Apple Human Interface Guidelines does not define a blockquote component directly. In editorial and news apps, Apple recommends using a visually distinct typographic treatment — typically a larger serif font with generous leading — to set quotations apart. In SwiftUI, developers use Text with custom font modifiers; there is no native Blockquote view.
Tailwind CSS styles blockquotes via the @tailwindcss/typography plugin's prose class, which applies: border-left: 0.25rem solid, padding-left: 1em, font-style: italic, and quotes: "\201C" "\201D". The prose modifier classes (prose-lg, prose-xl) scale blockquote sizing proportionally. For pull quotes, developers use utility classes directly: text-center text-2xl font-light with custom before/after pseudo-elements via arbitrary values. Use the Font Explorer to test serif vs sans-serif pairings for your blockquote typography.