Overview
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).
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.
Research and rationale
Our blockquote design is based on the Australian Government Design system pattern where a thick lefthand border and padding are used enhance the visual weight. The research conducted by the Digital Transformation agency indicated that this was done to address WCAG2.0 Criterion 1.4.1.
Colour
The blockquote style uses some of the same visual design patterns as the callout component for consistency, a fundamental principle of our Design Systems. The key difference with blockquotes is that they don't have a background shade, this was intentionally done so that quote would look distinct to callouts. We were also inspired by the W3C Design System that had a very similar design.
Semantics
Our blockquote was influenced by the W3C Design System which had provided best practice of the correct semantic markup and accessibility requirements. (W3C Design System, 2023).
Quotation marks
We follow the Australian Government Style Manual which states that you shouldn't use quotation marks to identify the quoted material – the formatting does that instead. Block quotes should also be coded with the HTML <blockquote> element (Digital Transformation Agency n.d.).
Classes
| Name | Description |
|---|---|
| Style applied to |
| Determines the look of quote source text. |
Variables
| Name | Description |
|---|---|
| Colour of design accent used on light backgrounds for blockquotes, callouts and other decorative borders. |
| Colour of design accent used on dark backgrounds for blockquotes, callouts and other decorative borders. |
Accessible blockquote requirements
Keep these considerations in mind.
WCAG guidelines
1.3.1 Info and Relationships
Structure the quote component using semantic HTML elements such as <blockquote> and <cite> for quotations and sources, respectively. This will ensure the information is conveyed effectively to screen reader users.
Considerations
There seems to be some debate and different approaches for the correct implementation of the <cite> element. Our approach is to use the cite element for a URLs and sources but never for authors and names. This is the same approach taken by the W3C Design System and Mozilla Developer Network both of these use figure and fig-caption in conjunction with the <blockquote> element for citing the authors.
1.4.1 Use of Colour
Ensure colour isn't used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. For example out callouts and quote designs have a thick left-hand border as an indicator.
1.4.3 Contrast (Minimum)
Ensure that the text colour and background colour of the quote have a contrast ratio of at least 4.5:1 to accommodate users with low vision or colour deficiencies.
2.4.6 Headings and labels
If the quote is part of a larger section or article, use clear and descriptive headings to help users navigate through the content.
Related
References
Dell (n.d.) Blockquote, Dell Design System, accessed September 11 2025.
W3C Design System (2023). Quote component, W3C Design System, accessed April 11 2023.
W3C (2018) Web Content Accessibility Guidelines (WCAG) 2.1, World Wide Web Consortium, accessed 10 April 2023.
Digital Transformation Agency (n.d.) Quotation marks, Australian Government Style Manual, accessed 11 April 2023.