Quote Card

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 — *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…

Your goal	Use this component
Emphasize 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

Clutter and confusion are failures of design, not attributes of information.

Edward Tufte

Author, Envisioning Information

The Work of Edward Tufte and Graphics Press

Elements of a Quote Card

Element	Purpose
Section 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

Features	Standards
Optimized 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