Use the Blockquotes component to create a semantic and visual distinction that helps users immediately recognise that the content is cited, quoted, or borrowed from another source, thus maintaining credibility and intellectual honesty. Beyond visual differentiation, Blockquotes help users' cognitive load by visually separating external voices from editorial content, allowing readers to adjust their expectations about tone, authority, and context.
Do's
- Reference the source of the quoted content
- Keep Blockquotes brief
- For the image variant, use only authentic portraits or photographs of the person quoted, ensuring the image adds meaningful context rather than mere decoration
Don'ts
- Do not place multiple Blockquotes in succession without intervening content - this fragments the narrative and works against the component's visual distinctiveness
- Avoid using Headings or other formatted elements within Blockquotes - they can create ambiguity about the message and who is being quoted
- Avoid using the image variant if you lack clear sourcing or image management processes - poor image quality or mismatches between images and attributions undermine trust
- If using the image variant, do not use altered, composited, heavily edited images
When to use
- Use Blockquotes when there is a need to distinguish external voices or evidence from editorial content
When not to use
- Do not use Blockquotes purely for styling or visual emphasis; if the goal is simply to highlight text, use typography or other components