Block quotes - Component

View full screen
Code

Source (Nunjucks)

<blockquote>
  <p>{{ data.quote }}</p>
  {% if data.cite %}
  <cite>{{ data.cite }}</cite>
  {% endif %}
</blockquote>

Output

<blockquote>
  <p>
    Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non
    metus auctor fringilla.
  </p>
  <cite>Adipiscing Ornare</cite>
</blockquote>

Information

Use block quotes to emphasize a quotation that's important to the main idea of a post. (For example, in a case study you might include a quotation from someone on the partner organization's management team.)

Always include a <cite> element indicating the quote's source at the end of a block quote.

Variants

No Cite

View full screen
Code

Source (Nunjucks)

<blockquote>
  <p>{{ data.quote }}</p>
  {% if data.cite %}
  <cite>{{ data.cite }}</cite>
  {% endif %}
</blockquote>

Output

<blockquote>
  <p>
    Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non
    metus auctor fringilla.
  </p>
</blockquote>