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.
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.
With graphic
<blockquote>
<p>
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.
</p>
<footer>Holly Zuluaga</footer>
</blockquote>
Without graphic
<blockquote class="no-quotation-mark">
<p>
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.
</p>
<footer>Holly Zuluaga</footer>
</blockquote>
Blockquote with image
You can pair a block quote with the image of related content or the author of the quote.
<div class="row">
<div class="col-md-4 text-right p-r-md p-t-sm">
<img src="/images/blockquote-with-image.jpg" class="img-fluid img-circle height-150" alt="Person's face">
</div>
<div class="col-md-8">
<blockquote>
<p>
You can pair a block quote with the image of related content or the
author of the quote.
</p>
<footer>Author</footer>
</blockquote>
</div>
</div>
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.
<blockquote class="pull-quote">
<p>
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.
</p>
<footer>Holly Zuluaga</footer>
</blockquote>
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.
<blockquote class="prominent">
<p>
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.
</p>
<footer>Holly Zuluaga</footer>
</blockquote>
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