# Quote Card ## expand\_more Purpose of the Quote Card ### Highlight a short quotation to add voice, emphasis, or credibility This component elevates a brief quote within a page, drawing attention to a key statement or testimonial. ![Quote Card component in layout](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2026-02/Quote%20Card.png?itok=XYGNSoGS) *Example page context showing where Quote Cards are typically used* ## ✓ Use this component when: - You want to emphasize a meaningful quotation - A quote adds credibility or perspective - The statement supports the surrounding content - The quote is concise and impactful ## ✕ Avoid using this component when: - The quotation is long or requires extensive context - The quote does not add meaningful value - The page already contains multiple highlighted elements - You are trying to convey primary page messaging (use Hero instead) ## Choosing Between Similar Components If your goal is… SortYour goalUse this componentEmphasize a quotation Quote Card Create a strong visual headline Hero Feature one story, event, or initiative 50/50 Card Provide quick links or actions Button-Style Cards ## Quote Card overview A Quote Card is a horizontal element that displays an image on the left side and a formatted and attributed quote on the right side. Quote Cards are often used to emphasize concepts through topically relevant and compelling quotes from respected sources. ## Example: Featuring a testimonial This example shows a Quote Card used to feature a testimonial that reinforces the credibility of the page’s content. ![Cover of the book Envisioning Information by Edward R. Tufte](/sites/g/files/omnuum631/files/styles/hwp_1_1__720x720_scale/public/2025-01/envisioning-information.jpg?itok=yxdTsWAC) Clutter and confusion are failures of design, not attributes of information. Edward Tufte Author, Envisioning Information [The Work of Edward Tufte and Graphics Press](https://www.edwardtufte.com) ## Elements of a Quote Card SortElementPurposeSection heading Displays an optional heading and description contextualizing the topic of the quote Image Displays on the left side of the text panel Quote Contains the quote text, marked with a open quote icon Attribution Includes the name, title, and link to the quotation source ## Guidance on using a Quote Card - **Use to engage site visitors.** Use Quote Cards on homepage or section landing pages to highlight impactful quotes from credible and respected sources. - **Use to illustrate content.** Use Quote Cards within content areas to add to and expand on the topic of articles and stories. - **Include relevant and compelling imagery.** Use an image that is directly relevant to the quote, such as a headshot of the person quoted or image of their work. If you don’t have a suitable image, provide the quote without an image. - **Include high quality, engaging images.** Use images that fit well within the Quote Card aspect ratio. - **Optimize space.** Use in regions with sufficient space. Avoid using in regions that are narrow due to side navigation or other elements. ## Content guidelines **Select strong quotations** Choose quotes that communicate a clear message or insight. **Edit for clarity if necessary** Ensure quotes are grammatically clear and readable while preserving meaning. **Maintain consistency** Use consistent formatting for attribution across pages. ## Accessibility considerations - Ensure sufficient contrast between text and background - Avoid using quotation marks as the sole visual indicator - Provide alternative text for any included images - Maintain logical heading structure around the quote ## Quote Card features SortFeaturesStandardsOptimized color contrast Minimum Contrast Left-aligned headings and text Text Block Alignment Background color, icons, and underlining used to indicate links Link Indicators Sans serif typeface used for CTA links Wayfinding Font See also:- [ Components ](/page-categories/components) ## Quote Card Showcase ### Quote Card with an image expand\_more This example shows a Quote Card with an image on the left and a quote and attribution on the right. ![Cover of the book Envisioning Information by Edward R. Tufte](/sites/g/files/omnuum631/files/styles/hwp_1_1__720x720_scale/public/2025-01/envisioning-information.jpg?itok=yxdTsWAC) Clutter and confusion are failures of design, not attributes of information. Edward Tufte Author, Envisioning Information [The Work of Edward Tufte and Graphics Press](https://www.edwardtufte.com) ### Quote Card with text expand\_more This example shows a Quote Card without an image. The quote and attribution span the full width of the card. Clutter and confusion are failures of design, not attributes of information. Edward Tufte Author, Envisioning Information [The Work of Edward Tufte and Graphics Press](https://www.edwardtufte.com) ### Quote Cards component with multiple cards expand\_more This example shows a Quote Card component with two cards, each with an image on the left and a quote and attribution on the right. ![Cover of the book Envisioning Information by Edward R. Tufte](/sites/g/files/omnuum631/files/styles/hwp_1_1__720x720_scale/public/2025-01/envisioning-information.jpg?itok=yxdTsWAC) Clutter and confusion are failures of design, not attributes of information. Edward Tufte Author, Envisioning Information [The Work of Edward Tufte and Graphics Press](https://www.edwardtufte.com) ![Cover of the book The Elements of Typography Style by Robert Bringhurst](/sites/g/files/omnuum631/files/styles/hwp_1_1__720x720_scale/public/2025-01/elements-of-typographic-style.jpg?itok=4JHeHLs_) Typography exists to honor content. Robert Bringhurst Author, The Elements of Typographic Style