Overview
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:
- To quote external sources with proper attribution
- For testimonials or user reviews in marketing layouts
- As pull quotes in editorial content to break up long-form text
- To highlight key takeaways or important passages
When NOT to use a Blockquote:
- For visual indentation only — use CSS
marginor a layout component like Stack - For callouts or alerts — use an Alert which carries semantic urgency
- For code — use a Code Block
- For emphasis within running text — use
<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.
Variants
Common Blockquote Variants
| 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 |
Visual Embellishments
| 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 Variants
| 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 |
Properties
Blockquote Properties
| 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 Mappings
Design Token Mappings
| 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.
States
Blockquote States
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 |
Interactive Blockquote States (Testimonial Carousels)
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 |
Accessibility
Accessibility
Blockquotes carry specific accessibility requirements around semantic markup, attribution, and visual contrast.
Semantic Structure (WCAG 1.3.1 – Info and Relationships):
- Always use the native
<blockquote>element — screen readers announce it as a "blockquote" landmark, helping users understand the content structure - Place attribution inside a
<footer>within the blockquote, with the source name wrapped in a<cite>element - For short inline quotations (fewer than ~40 words), use
<q>instead of<blockquote>— browsers add language-appropriate quotation marks automatically
Color Contrast (WCAG 1.4.3 – Contrast Minimum):
- Blockquote text often uses a lighter color than body text (
color-text-secondary). Verify it meets 4.5:1 against the background — including any tinted blockquote backgrounds. Use the Contrast Checker. - Left border color is decorative and does not need to meet contrast requirements, but the border should not be the only indicator of a blockquote — combine with padding, font changes, or background
- Citation text (
color-text-tertiary) frequently fails contrast. Test it.
Content Distinction (WCAG 1.3.3 – Sensory Characteristics):
- Don't rely solely on italics to indicate a blockquote — users with dyslexia may find italicized text harder to read
- Combine at least two visual signals: border + indentation, background + typography shift, or icon + font change
Quotation Marks and Screen Readers:
- Decorative quotation marks added via CSS
::before { content: "\201C" }are read by some screen readers. Addaria-hidden="true"to the pseudo-element's parent span, or use a background image instead - The
<q>element automatically adds quotation marks — don't double them by adding manual quotes in the text content
Language (WCAG 3.1.2 – Language of Parts):
- If the blockquote is in a different language than the page, add
langattribute:<blockquote lang="fr">— this ensures screen readers switch pronunciation rules
Keyboard Navigation:
- Blockquotes are not interactive by default and should not be focusable
- If a "Read more" expansion is present, the trigger must be a
<button>with keyboard access - If the blockquote links to a source via the
citeattribute, consider adding a visible link —citeis not exposed to users by browsers
Usage Guidelines
Usage Guidelines
Do:
- Use
<blockquote>for actual quotations, not for visual indentation or emphasis - Include attribution using
<footer>and<cite>elements within the blockquote - Set the
citeattribute to the source URL when available (for machines, not humans) - Keep pull quotes concise — one to three sentences maximum for scannability
- Use a contrasting typographic treatment (serif italic, larger weight, different color) to visually separate quotes from body text
- Test blockquote backgrounds against text color for WCAG compliance
Don't:
- Don't nest blockquotes more than one level deep — it creates visual confusion and semantic ambiguity
- Don't use blockquotes for callout boxes — use Alert or a dedicated Callout component
- Don't use blockquotes for code — use Code Block
- Don't put the author name inside the
<blockquote>text content without wrapping it in<footer>— screen readers will read attribution as part of the quote - Don't use a blockquote for a single word or very short phrase — it looks disproportionate and creates unnecessary semantic weight
- Don't forget vertical margins — blockquotes need breathing room above and below to create clear content separation
Code Snippets
<!-- 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>
);
}Design Systems
Design System Implementations
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.