Block quotes - Component

Render: {{ design.components.render('block-quotes') | safe }}

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

Render: {{ design.components.render('block-quotes-no-cite') | safe }}

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>