Blockquote

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

Status

Figma UI Kit	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production
Angular	In backlogElement is in backlog
React	In backlogElement is in backlog

Anatomy

This component consists of two primary elements: the quote text and the citation source field.

Quote text: the quotation.
Citation field: the quote’s source.

Usage

Be sure not to confuse blockquote and pull quote. A pull quote is a short excerpt taken from the presented text. Blockquotes refer to external sources which may not already be mentioned and are placed within the reader’s flow. Blockquotes generally feature direct quotations that are longer than 40 words. A typical use case might include highlighting positive feedback or product reviews from customers. Blockquotes can also help break up large portions of text.

Best practices:

Offset blockquotes from the main text
Do not include quotation marks
Make sure the quotation is contextually relevant and accurate
Do not reformat the text style

Offset blockquotes from the rest of the page text.

Color

Light mode

All colors meet accessibility standards and match our foundation palette.

Color	Use cases	Hex
Gray 800	Blockquote body text	#636363
Gray 900	Citation source field text	#0E0E0E

Layout

Alignment

Blockquotes can be left-aligned, center-aligned, or right-aligned, depending on the page layout and design.

Specifications

Breakpoints below 1023 pixels

For extra small (XS) to medium (M) grid breakpoints, top, bottom, right, and left padding is 16 pixels.

Breakpoints above 1024 pixels

For large (L) to 5XL grid breakpoints, top and bottom padding is 16 pixels, and right and left padding is 32 pixels.

Standards

Accessibility

Avoid using blockquotes for styling alone
Blockquotes are structural page elements which are specifically announced by screen readers. As a result, using a blockquote for anything other than its intended purpose will be confusing for anyone using assistive technologies.

Live demo

This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.

You are now entering a live demo of the component.

<figure class="dds__blockquote">
  <blockquote>
    <p>
      We’ve been given a glimpse of the future, and the organizations that are accelerating their digital transformation now will be poised
      for success in the Data Era that is unfolding before our eyes.
    </p>
  </blockquote>
  <figcaption>
    — Michael Dell
    <cite>Chairman and CEO, Dell Technologies</cite>
  </figcaption>
</figure>

Copy code

View the blockquote demo and code in Vanilla.

Blockquote

Status

Contents

Anatomy

Contents

Contents

Usage

Color

Light mode

Layout

Alignment

Specifications

Breakpoints below 1023 pixels

Breakpoints above 1024 pixels

Standards

Accessibility

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Contents

Blockquote

Status

Contents

AnatomyCopy link to this section

Contents

Vanilla

Anatomy