Blockquote

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.

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

Both blockquote sizes can be left or center aligned.

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

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.

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.

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

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.

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.

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

The quote icon and citation text must always be included.

Blockquotes that are too thin are sometimes hard to read.

Do not add an emphasis border to a centered blockquote.

Do not place any elements near centered blockquotes.