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

Example
Source code

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

Source code

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

Example

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

Author

Source code


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

Pull quote

Example
Source code

Example

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

Source code


  
    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

Example
Source code

Example

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

Source code


  
    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