Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Blockquote

OverviewStyleGuidelinesCodeAccessibilityDemos
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

Provides a styled blockquote for featuring quotes with an icon and attribution. Use when highlighting a customer testimonial, expert opinion, or notable statement. Authors must provide quoted text and should include an author. Uses <figure> semantics with <blockquote> and <figcaption>, so screen readers convey the quote and its source. Avoid placing interactive elements inside.

import '@rhds/elements/rh-blockquote/rh-blockquote.js';
 
<rh-blockquote>
  <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
  <span slot="author">Linus Torvalds</span>
  <span slot="subtitle">Software Engineer</span>
</rh-blockquote>
 
import { Blockquote } from "@rhds/elements/react/rh-blockquote/rh-blockquote.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Blockquote>
    <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
    <span slot="author">Linus Torvalds</span>
    <span slot="subtitle">Software Engineer</span>
  </Blockquote>
);

The author's name or pseudonym. Overridden by the author slot. Should not contain long strings of text.

The author's job title or role. Overridden by the subtitle slot. Should not contain long strings of text. May contain links.

built-in tooltip blockquote figure element. Defaults to 'Blockquote'.

Sets the color palette for the blockquote and its child content. Adapts text and icon colors for light or dark backgrounds. Possible values are:

  • lightest (default)
  • darkest

Controls the horizontal alignment of the blockquote content. Use center for short quotes in visually prominent layouts. Avoid centering long text, as it reduces readability. Possible values are:

  • inline-start (default)
  • center

When present, renders a brand-colored emphasis border on the inline-start side of the blockquote for additional visual prominence.

Controls the text size of the quoted passage. Use large for short, impactful quotes and default for longer passages. Possible values are:

  • default
  • large
 View source on GitHub

Status

When to use

  • Feature a quote from an external source
  • Highlight positive feedback or reviews from customers
  • Break up large portions of text

Status checklist

Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify