Blockquotes

source

Usage

A blockquote should be used to highlight a quote from an individual. Because of the visual weight of the component, not all quotes should be inside a blockquote. It is advised to have no more than 2 blockquotes on a single page and that they should be separated by other blocks of content such as several paragraphs of text.

Markup

The blockquote styles are applied directly to the blockquote html element and no additional class names are required. Please read more about blockquotes from the developer documentation.

<blockquote>
  <p>Quote text</p>
  <p>Quote source</p>
</blockquote>

If the <blockquote> element is not semantically correct, a <div> element may be used instead with the class pullquote.

<div class="pullquote">
  <p>Quote text</p>
  <p>Quote source</p>
</div>