Blockquote

A blockquote emphasizes quotes or excerpts related to the page content.

Blockquote text is styled differently from the main text and is typically used for important quotations.

Basic blockquote

With graphic

Good quotes help to tell a story and enhance the credibility of a press release, news story, or speech. Words that are crafted well can leave a lasting impact on the world.

Holly Zuluaga

Without graphic

Good quotes help to tell a story and enhance the credibility of a press release, news story, or speech. Words that are crafted well can leave a lasting impact on the world.

Holly Zuluaga

With graphic

Good quotes help to tell a story and enhance the credibility of a press release, news story, or speech. Words that are crafted well can leave a lasting impact on the world.

Holly Zuluaga

Without graphic

Good quotes help to tell a story and enhance the credibility of a press release, news story, or speech. Words that are crafted well can leave a lasting impact on the world.

Holly Zuluaga

Blockquote with image

Person's face

You can pair a block quote with the image of related content or the author of the quote.

Author
Person's face

You can pair a block quote with the image of related content or the author of the quote.

Author

Pull quote

Good quotes help to tell a story and enhance the credibility of a press release, news story, or speech. Words that are crafted well can leave a lasting impact on the world.

Holly Zuluaga

Good quotes help to tell a story and enhance the credibility of a press release, news story, or speech. Words that are crafted well can leave a lasting impact on the world.

Holly Zuluaga

Prominent blockquote

Good quotes help to tell a story and enhance the credibility of a press release, news story, or speech. Words that are crafted well can leave a lasting impact on the world.

Holly Zuluaga

Good quotes help to tell a story and enhance the credibility of a press release, news story, or speech. Words that are crafted well can leave a lasting impact on the world.

Holly Zuluaga

Usage

When and how to use it

Use blockquotes to display a quote from a person or a source.

List the speaker or author of the quote with their relevant title.

How not to use it

Do not use more than one block quote variation on a single page.

Avoid hyperlinks inside the blockquote. Use the body content to link to additional information from the speaker.

Accessibility

Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes