Blockquote

Marketing specificUpdated May 23, 2026

Description

A blockquote is a quotation with a citation, designed to be offset from the main text on a page.

Warning

Note. This component should only be used in a marketing context. For example, in a Pendo guide or other GID use case.

Anatomy

Light

Dark

Ensure that the quoted material is appropriate and faithfully reflects the original context.
Where available, using a photo of a customer really helps to build on the personal nature of the quote.

Users of assistive technology should be able to:

Understand that the content is a distinct section of quoted content.
Understand the relationship between the blockquote and the section of content the quote relates to.

The quote bar needs to have a minimum contrast ratio of 3:1 against the background.
The text needs to have a minimum contrast ratio of 4.5:1 against the background.
The Blockquote text must not be an image of text.

Use the native element to indicate quoted content. This provides built-in semantic meaning for screen readers.
Note: This element is supported inconsistently by different screen readers. It is announced as a quote by both JAWS and NVDA. However, VoiceOver does not announce it.
The profile image must be marked with null alt text:alt="".
If the citation is given with a link, use the attribute within the link element.

Date	Changes
October 2025	Added dark mode image.
August 2025	Added guidance on accessibility.
September 2024	New version created. Previous version archived in the frozen Web design system.