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
ImportingUsagerh-blockquoteImportingUsagerh-blockquote

Importing

Add rh-blockquote to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

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

<script type="module">
  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
</script>
Copy to Clipboard Wrap lines

rh-blockquote

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.

Theming

Themable Color palette

This element uses Red Hat design system theming and can be used in themable contexts.

This element is a color palette container and supports all color palettes via the color-palette attribute.

Slots 4

Slot Name Summary Description
[default]

Block elements like <p> for the quoted passage. Screen readers announce this within the figure landmark.
Note: [default] unnamed slots do not have a slot="name" attribute.
author

Inline text for the quoted person's name. Screen readers announce this as attribution for the quote. Overrides the author attribute.
title

Inline text for the author's job title or role. Screen readers announce this in the figcaption. Deprecated: use subtitle.
subtitle

Inline text for the author's job title or role. Screen readers announce this in the figcaption. Overrides the subtitle attribute. Should not contain long strings of text. May contain links.

Attributes 7 1

Attribute DOM Property Description Type Default
author author

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

 
string
 
unknown
subtitle subtitle

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

 
string
 
unknown
color-palette colorPalette

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
 
'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'
 
unknown
align align

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
 
'center' | 'inline-start'
 
'inline-start'
highlight highlight

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

 
boolean
 
false
size size

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

  • default
  • large
 
'default' | 'large'
 
'default'
Attribute DOM Property Description Type Default
title title

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

 
string
 
'Blockquote'

Methods 0

None

Events 0

None

CSS Shadow Parts 0

None

CSS Custom Properties 0

None

Design Tokens 19

Token Description Copy
--rh-color-text-primary

Primary text color for the blockquote
--rh-font-size-body-text-lg

Base font size for blockquote body text

18px font size
--rh-font-family-heading

Display font family used for quotation text

Heading font family
--rh-line-height-body-text

Line height for blockquote body text

Line height for body text
--rh-font-weight-heading-regular

Regular weight for quotation text

Regular font weight for headings
--rh-font-size-body-text-xl

Larger font size on wider viewports

Font size for quoted paragraph text

20px font size
--rh-length-lg

Bottom spacing below quoted paragraph text

16px length token
--rh-color-text-secondary

Attribution text color, themed via rh-color-text-secondary
--rh-font-family-body-text

Body text font family for attribution text

Body text font family
--rh-font-size-body-text-sm

Smaller font size for attribution text

14px font size
--rh-font-weight-heading-bold

Bold weight for the author name

Bold font weight for headings
--rh-space-lg

Top spacing above the author name

16px spacer
--rh-color-icon-primary

Icon color for the opening quotemark
--rh-font-size-body-text-2xl

24px font size
--rh-line-height-heading

Line height for headings
--rh-font-size-heading-md

h4 heading font size
--rh-length-md

Width of the highlighted inline-start emphasis border

8px length token
--rh-color-accent-brand

Color for the highlighted inline-start emphasis border
--rh-length-xl

Inline padding between border and content

24px length token
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify