Blockquote

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 margin or 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
Print	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

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. Add aria-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 lang attribute: <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 cite attribute, consider adding a visible link — cite is not exposed to users by browsers

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 cite attribute 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

html

<!-- 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>

tsx

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.

TypographyQuoteCitationPull Quote

Text

Code Block

Blockquote

Overview

Variants

Common Blockquote Variants

Visual Embellishments

Size Variants

Properties

Blockquote Properties

Token Mappings

Design Token Mappings

States

Blockquote States

Interactive Blockquote States (Testimonial Carousels)

Accessibility

Accessibility

Usage Guidelines

Usage Guidelines

Code Snippets

Design Systems

Design System Implementations

Related Components