A block quote is used to display quoted or cited text, typically styled to distinguish it from regular content.
Block quote example
Use the block quote to indicate that a piece of content is a quotation from an author or speaker. Generally they are longer than 30 words and often include a cite attribute for the author or speaker’s name.
A block quote component has:
quote text
reference (for cited quotations only).
Vanilla example
Palette
The goal of the Web is to serve humanity. We build it now so that those who come to it later will be able to create things we cannot ourselves imagine.
<figure class="qld__block-quote">
<!-- The blockquote tag is used for a longer quotation,
and the cite attribute is used to provide the URL of the source of the quote. -->
<blockquote cite="https://example.com/source-of-the-quote">
The goal of the Web is to serve humanity. We build it now so that those who come to it later will be able to create things we cannot ourselves imagine.
</blockquote>
<!-- The figcaption tag is used to provide a caption for the figure. In this case, it's the name of the author of the quote. -->
<figcaption class="qld__quote-source">
Sir Tim Berners-Lee
</figcaption>
</figure>
Usage guidelines for blockquotes
When to use
To show direct speech and the quoted work of other writers.
To present cited material that needs clear visual distinction from body text.
When attributing text to an identifiable source (with or without a citation).
When not to use
For highlighting important information (use a callout instead).
For general notes, tips, or warnings (use appropriate in-page alert instead).
How to use blockquotes
Don’t use quotation marks to identify the quoted material, the formatting does that instead.
Minimise the use of blockquotes on a page and avoid stacking them if possible.
