Blockquote
Indicates text that is a direct quotation or a distinct excerpt from the main content.
Examples
We currently have one blockquote style, which can include an image of the quoted person. Please use an image only if available and with proper permissions.
Usage
A blockquote is used to present quoted material in a way that distinguishes it from your content and gives proper credit to the source. It serves to maintain clarity, provide context, and enhance the overall structure and readability of your document or web page.
Do:
- quote accurately, quoted text should be true to the original source
- provide proper attribution, clearly credit the source or author of the quote
- use blockquotes to emphasise particularly significant or insightful portions of text to help readers focus on key ideas or statements
- separate dialogue in creative writing, scriptwriting, or when formatting interviews with blockquotes to set off dialogue or conversation to distinguish it from narrative text
- break up lengthy content with blockquotes to improve the document's structure and readability
Avoid:
- modifying or altering the quoted text, maintain accuracy and integrity
- plagiarism, always attribute quotes and avoid presenting them as your own work
- overwhelming your text with too many blockquotes
- misleading your readers, make sure that the context of the quote remains clear
- irrelevant quotes, use blockquotes that are relevant to your content and add value to your message
- excessively long blocks of text
- placing blockquotes without context, you should provide some introductory or explanatory text to connect the quote with your content
If we want users to like our software, we should design it to behave like a likeable person: respectful, generous and helpful.
If we want users to like our software, we should design it to behave like a likeable person: respectful, generous and helpful.
<turas-blockquote blockquote-job-title="Software designer and programmer" blockquote-persons-name="Alan Cooper">
<p>If we want users to like our software, we should design it to behave like a likeable person: respectful, generous and helpful.</p>
</turas-blockquote>
<blockquote class="blockquote ">
<p>If we want users to like our software, we should design it to behave like a likeable person: respectful, generous and helpful.</p>
<footer class="blockquote-footer">Alan Cooper, <cite title="Software designer and programmer">Software designer and programmer</cite></footer></blockquote>
Optional parameters
- blockquote-job-title - quoted person's job title or position
- blockquote-persons-name - quoted person's name
- additional-classes - additional CSS classes
- id - the HTML ID attribute
Accessibility status
This component is fully compliant with the WCAG 2.2 standard.
Testing
- test block quote with screen readers to ensure they are announced as expected
Developer considerations
- ensure that you use the <blockquote> element rather than using "" on a page this will mean that screen readers will recognise the change in context of the text on the page
