Pattern library

Block quotes

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.

View full screen

Details

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>

Variants

No Cite

View full screen

Details

Source

<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>