Skip to main content Red Hat Design System logo Contribute on Github

Blockquote

Overview Style Guidelines Code Demos Accessibility

Usage

Use a blockquote to highlight quotation and citation text so users can identify them easier. A blockquote has a flexible layout and it includes a variety of optional elements, so use it strategically because there is a balance between using some and too many blockquotes. A blockquote should have adequate padding around it to avoid competing with other content or elements.

Sizes

Use the Default size for larger amounts of text and the Large size for smaller amounts of text.

Image of two blockquotes, default size on the left and large size on the right with green check icons below

Alignment

Both blockquote sizes can be left or center aligned.

Warning

Centered text is sometimes hard to read, so avoid setting a lot of text in the center alignment.

Image of two blockquotes, default and large sizes both vertically centered

Variations

A variety of extras including an emphasis border, logo, and text styles may be added to a blockquote.

Light theme

Image of a light theme blockquote with red emphasis border Image of two light theme blockquotes, left example is default size with logo and right example is default size with title text and heading text

Dark theme

Image of a dark theme blockquote with red emphasis border Image of two dark theme blockquotes, left example is default size with logo and right example is default size with title text and heading text

Other elements

Other elements including a video or card may also be added to a blockquote. They are aligned to the top of the quote icon if included.

Image of blockquote with video to the right Image of blockquote with card to the right

Layout

Minimum width

A minimum width is hard to determine because a blockquote can be placed in a variety of layouts. However, a thin blockquote has readability issues, so use your best judgment when considering how wide a blockquote should be. A reasonable minimum width for a blockquote in a page layout is 450px. If a blockquote is used in a card, the minimum width will be smaller.

Image of default size blockquote left aligned with a minimum width of 450px Image of large size blockquote vertically centered with a minimum width of 450px

Maximum width

The maximum width of a blockquote anywhere is 750px to avoid reader fatigue.

Image of default size blockquote left aligned with a maximum width of 750px Image of large size blockquote vertically centered with a maximum width of 750px

Card

A Default size blockquote can be placed in a card if the text is short enough. Otherwise, keep blockquotes with lots of text in the page layout to avoid readability issues. A blockquote will get taller as containers and breakpoints get smaller, so take that into consideration as well.

Image of default size blockquote in a card

Other elements

When other elements are used with blockquotes, they are placed on the right. Some elements like a video will cause the width of a blockquote to decrease or increase.

Helpful tip

There is always one column of space in between a blockquote and another element like a video or card.

Image of blockquote with video to the right and a grid overlaid on top Image of blockquote with card to the right and a grid overlaid on top

Responsive design

As breakpoints get smaller, blockquote text sizes will be reduced based on the mobile typography scale.

Default size

Image of a default size blockquote for desktop Image of a default size blockquote for tablet Image of a default size blockquote for large mobile screens Image of a default size blockquote for small mobile screens

Large size

Image of a large size blockquote for desktop Image of a large size blockquote for tablet Image of a large size blockquote for large mobile screens Image of a large size blockquote for small mobile screens

Other elements

Image of a blockquote with video for desktop Image of a blockquote with video for tablet Image of a blockquote with video for large mobile screens Image of a blockquote with video for small mobile screens

Best practices

Missing elements

The quote icon and citation text must always be included.

Image of two blockquotes both missing elements which is incorrect usage

Readability issues

Blockquotes that are too thin are sometimes hard to read.

Image of two very thin blockquotes which is incorrect usage

Adding an emphasis border

Do not add an emphasis border to a centered blockquote.

Image of a large size blockquote with an emphasis border on the left which is incorrect usage

Centered blockquotes

Do not place any elements near centered blockquotes.

Image of a vertically centered blockquote with a placeholder element next to it which is incorrect usage
© 2021-2024 Red Hat, Inc. Deploys by Netlify