Quote
Last updated
Was this helpful?
Last updated
Was this helpful?
The Quote component displays distinctive text with attribution, visually separated from regular content to emphasise important statements or testimonials.
Use the Quote component when you need to:
Highlight or emphasise a direct quotation from a person or publication
Feature testimonials from users, stakeholders, or partners
Showcase important statements that deserve special attention
Break up large blocks of content to add visual interest and improve readability
Do not use the Quote component when:
The statement is not a direct quotation or does not have an attributed source
The content should be displayed as standard body text without special emphasis
The text is too lengthy or contains multiple paragraphs, as quotes work best with concise content
You need to display code snippets (use a code component instead)
Keep quotes concise: Quotes should be relatively short and to the point. Long quotes can lose impact and disrupt the reading flow.
Always include attribution: Include the source of the quote to provide context and credibility. This could be a person's name, title, organisation, or publication source.
Maintain visual distinction: Quotes should be visually distinct from the surrounding content, using elements like vertical bars, indentation, or background styling to clearly separate them.
Preserve original wording: When quoting directly, maintain the exact wording of the original statement. If edits are needed for clarity or length, use ellipses (...) to indicate omissions.
Consider placement carefully: Position quotes strategically within content to enhance rather than interrupt the flow of information. Quotes can work well to introduce a section, punctuate important points, or summarise key messages.
Ensure accessibility: Make sure that the visual styling of quotes maintains sufficient contrast and that any decorative elements don't interfere with screen readers.
The Quote component has been assessed against WCAG 2.2 accessibility guidelines. According to the 'CivicTheme v1.7.0 Accessibility Assessments' file, the Quote component passes the following standards:
1.3.1 Info and Relationships
A
Information, structure, and relationships conveyed through presentation can be programmatically determined
1.4.3 Contrast (Minimum)
AA
Text and images of text have sufficient contrast against their background
1.4.4 Resize text
AA
Text can be resized without assistive technology up to 200% without loss of content or functionality
1.4.12 Text Spacing
AA
No loss of content or functionality occurs when text spacing is adjusted
2.1.1 Keyboard
A
All functionality is operable through a keyboard interface
2.4.3 Focus Order
A
Components receive focus in an order that preserves meaning and operability
2.4.7 Focus Visible
AA
Keyboard focus indicator is visible on the interface element that has focus
The component is designed to maintain appropriate contrast, be navigable via keyboard, and retain proper structure and relationships when interpreted by assistive technologies.
No specific security concerns exist for this component as it is a static presentational element. Standard content sanitisation practices should be applied when the quote contains user-generated or externally sourced content.
The Quote component is widely used across government websites, educational institutions, and corporate sites that implement the CivicTheme design system. As this is a fundamental component for displaying testimonials and significant statements, it appears in various content-rich environments.
This component has been modelled after the Default Callout component from the former Australian Government Design System (AGDS). CivicTheme has uplifted the component in the following ways:
Rather than present a heading and body copy as the foundations of the component, the Quote component uses larger body copy for the quote and smaller citation copy to cite the source of the quote
The component leverages the style and treatment of the Callout component to present quotes that creators may want to highlight within the content of the page
A distinctive vertical bar design element has been added to visually differentiate quotes from surrounding content
The Quote component helps to separate large amounts of text into smaller, readable blocks, applying the concept of "chunking" from cognitive psychology to improve content processing and readability.
★★★☆☆ Confidence rating = Moderate (Based on indirect evidence and established design patterns)
While no specific user research data is available for this exact implementation of the Quote component in CivicTheme, the design follows established patterns that have been validated through research in other contexts. The component builds on well-established design patterns for displaying quotations that have been demonstrated to be effective across various digital platforms.
User testing on similar quote components in other design systems has shown that users appreciate the visual distinction that sets quotes apart from regular content, making important statements more memorable and impactful.
More targeted research specific to this implementation would help validate its effectiveness within the CivicTheme ecosystem.
Responsive behaviour: On smaller mobile screens, longer quotes may create readability challenges if not properly handled
Attribution alignment: When attribution text is lengthy, it may wrap in ways that affect the visual balance of the component
Visual distinction: In some contexts, the visual styling of the quote may not provide sufficient distinction from surrounding elements
Research is needed in the following areas:
User comprehension: How effectively do users distinguish between quoted content and regular text across different contexts?
Optimal quote length: What is the ideal length for quotes before user engagement decreases?
Attribution placement: What attribution placement (bottom, right, inline) is most effective for different types of quotes?
Responsive design: How can the quote component best adapt to various screen sizes while maintaining impact?
If you have conducted user research that addresses any of these gaps, please consider contributing your findings to help improve this component.
To help make this component more useful and up-to-date, you can:
Contribute to our quote component discussion on GitHub
Submit your user research findings to help improve the quote component
Propose a change to the quote component through a pull request
Storybook
GitHub
1.8.0
23 Jul 2024
Recategorised from Molecules to Atoms
1.7.0
20 Mar 2024
Accessibility improvements for WCAG 2.2 compliance
1.6.0
15 Jan 2024
Initial component release
Check out our to learn more.
Nielsen Norman Group. (2019).
Web Content Accessibility Guidelines (WCAG) 2.2. (2023).
Web Content Accessibility Guidelines (WCAG) 2.2. (2023).
If you have a question about the CivicTheme design system or need our help, visit the page for guidance.