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
Adobe XD Kit	In backlogElement is in backlog
Vanilla	PublishedElement can be used in production
Web Components	ExperimentalElement offered for testing and feedback. Not intended for use in production.
React	In backlogElement is in backlog
Angular	In backlogElement is in backlog
Documentation	PublishedElement can be used in production

What's new

Blockquote is a new component. It’s been designed using the new foundations, which include an updated font ramp and color palette.

Anatomy

The parts of the blockquote, labeled 1 and 2. — 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.

Feedback

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.

Blockquote usage within a generic page mockup. — 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.

Blockquote examples that are left-aligned, center-aligned, and right-aligned.

Specifications

Breakpoints below 1023 pixels

Blockquote padding for extra small to medium grids is 16 pixels on the top, bottom, left and right. — For extra small (XS) to medium (M) grid breakpoints, top, bottom, right, and left padding is 16 pixels.

Breakpoints above 1024 pixels

Blockquote padding for large to 5XL grids is 16 pixels on the top and bottom, 32 pixels on the left and right. — 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.

Visit Storybook

View the code and demo. Not intended for use in production.

Visit Storybook

Blockquote

Status

Contents

What's new

Anatomy

Feedback

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

Web components (experimental)

Contents

Blockquote

Status

Contents

What's newCopy link to this section

AnatomyCopy link to this section

Feedback

Contents

What's new

Anatomy