Blockquote

[usethetics]

Naam

Blockquote

Link naar GitHub Discussion

---

Variants

• attribution
• pull-quote: When quotes duplicate content from the main body of the article, they can be seen as non-essential parts of the document. It is more accessible to indicate them by wrapping the quote in an aside element.

Examples of blockquote variations in an article

default blockquote

<article>
  <blockquote>I never lie</blockquote>
</article>

with attribution

<article>
  <figure>
    <blockquote>I never lie</blockquote>
    <figcaption>Jeffrey - April 2023</figcaption>
  </figure>
</article>

pull-quote:

<article>
  <h2>A day in the park</h2>
  <p>And Jeffrey said it was a very beautiful day in April</p>
  <aside>
    <blockquote>It was a very beautiful day</blockquote>
  </aside>
</article>

pull-quote with attribution:

<article>
  <h2>A day in the park</h2>
  <p>And Jeffrey said it was a very beautiful day in April</p>
  <aside>
    <figure>
     <blockquote>It was a very beautiful day</blockquote>
     <figcaption>Jeffrey - April 2023</figcaption>
    </figure>
  </aside>
</article>

Use when

Don’t use when

Alternative components

• 184

Naming

We use Blockquote as this is the <blockquote> element in HTML

[hidde]

Adrian Roselli recently looked at blockquotes and how they are read out by screenreaders.

He recommends against figure/figcaption as it is a lot more verbose, advice was also updated on MDN.