Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographySpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Blockquote

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleSizesColor schemeConfigurationSpaceInteraction statesStyleSizesColor schemeConfigurationSpaceInteraction states

Style

A blockquote is a combination of elements used to give emphasis to a quote. A blockquote includes a quote icon, quotation text, and attribution text at a minimum. A blockquote may also include the following optional elements:

  • Logo or image
  • Emphasis border
Anatomy image of a blockquote with numbered annotations
  1. Quote icon
  2. Quotation text
  3. Attribution text
  4. Logo
  5. Emphasis border

Sizes

Two blockquotes, default size on the left and large size on the right

Color scheme

Light color scheme

A light color scheme blockquote, red quote icon, black quotation text, and dark gray citation text

Dark color scheme

A dark color scheme blockquote, red quote icon, white quotation text, and light gray citation text

Configuration

Elements in both blockquote sizes are aligned left by default, but they can be centered if necessary.

Four blockquotes, two are left aligned and two are vertically centered, the quote icon is 20px tall

Attribution text

Three attribution text examples
Property Token or value
Font weight - name --rh-font-weight-body-text-medium
Font weight - job title and company --rh-font-weight-body-text-regular
Font style - company font-style: italic;

Space

Four blockquotes with spacing values in between

Interaction states

A blockquote does not have interaction states unless interactive elements are added.

Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify