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
General usageLayoutResponsive designBest practicesGeneral usageLayoutResponsive designBest practices

General usage

In general, use a blockquote to highlight quote and attribution text so users can identify them easier. A blockquote should have lots of space around it to avoid competing with other elements.

Sizes

Use the Default size for large amounts of text and the Large size for small amounts of text.

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

Layout

Alignment

A blockquote should be aligned left by default, but sometimes they can be centered.

Warning

In general, centered text is hard to read, so do not center align long quote text.

 Two blockquotes, the first aligned left and the second aligned center, with small green checks below each

Minimum width

An acceptable minimum blockquote width is 4 desktop grid columns. If a blockquote is placed in a card, the width might be less. Be careful about making a blockquote too thin otherwise there will be lots of lines of text.

Two blockquotes, the first a default size blockquote that's left aligned and the second blockquote that's center-aligned. Both have a minimum width of 356px

Maximum width

The blockquote maximum width is 7 desktop grid columns or 789px.

Two blockquotes, the first a default size blockquote that's left aligned with a width of 647px, and the second blockquote is center-aligned with a maximum width of 789px

Responsive design

Blockquote text size reduces as screens get smaller. However, quote icon and attribution text sizes do not change.

To learn more about how text sizes change, go to the Typography section.

Default size

Default sizes for desktop, tablets, and smaller devices, showing 7 columns for desktop and tablets and 2 wider columns for smaller devices.

Large size

Large sizes for desktop, tablets, and smaller devices, showing 7 columns for desktop and tablets and 2 wider columns for smaller devices.

Best practices

Missing quote icon

A proper blockquote including a quote icon, quote text, and attribution text

Always include a quote icon, quote text, and attribution text.

 An improper blockquote that is missing a quote icon

Do not omit the quote icon otherwise it does not read like a quote.

Missing attribution text

A proper blockquote including a quote icon, quote text, and attribution text

Always include a quote icon, quote text, and attribution text.

 An improper blockquote that is missing attribution text

Do not omit the attribution text because all quotes need sources.

Readability at small screen sizes

A blockquote with the right amount of text

Try and limit the amount of text in a blockquote.

 A blockquote on a narrow screen showing how too much text can look bad

Be aware that lots of text will cause lots of lines on small screens.
Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify