<h2>What’s new in v3</h2>
<ul>
<li><strong>Italic formatting:</strong> Source text now uses italic styling to stay aligned with code implementation.</li>
<li><strong>Source placement:</strong> The source can now appear within the preceding paragraph, adding flexibility beyond the previous “below only” restriction.</li>
<li><strong>Default behavior:</strong> In Figma, the component ships with the source shown below by default. It can be hidden in the component properties if the source is included manually in the paragraph.</li>
<li><strong>Breakpoint:</strong> The breakpoint property has been removed, as the component now includes built‑in responsiveness.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Use a blockquote to highlight a quotation, excerpt, testimonial or external reference. Blockquotes draw attention to quoted text and should not be used for general emphasis.</p>
<p>Use the blockquote to:</p>
<ul>
<li>Present a direct quotation from a person, publication or external source.</li>
<li>Call attention to a key statement, insight or testimonial.</li>
<li>Distinguish long or important quotes from surrounding body text.</li>
<li>Improve readability when citing extended or multi‑line quotations.</li>
</ul>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"","caption":"\nBlockquote consists of two elements:\n\n1. Quote text: the quoted content.\n2. Source (optional): attribution for the quote. The source can appear in two ways:\n\n   * below the quote (default, italicized automatically).\n   * inline in the preceding paragraph (added manually and italicized by the designer).","url":"https://dds.dell.com/site/v3/components/blockquote/blockquote-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use a blockquote to highlight external quotations inside long‑form content. Blockquotes should present text from a person, publication, or source that is not written by you. Place them inline with the reading flow to give the quoted content visual emphasis.

Avoid confusing blockquotes with pull quotes. Pull quotes are taken from the same page’s content for decorative or editorial emphasis. Blockquotes always reference an external source.

Blockquotes typically contain longer quotations (more than 40 words). Common use cases include customer testimonials, reviews, expert statements, or cited excerpts in articles. They can also help break up dense text and improve readability.

**Best practices:**

* offset blockquotes from the main text.
* do not include quotation marks.
* keep the quotation accurate and relevant.
* do not restyle or reformat the text.

<details data-name='image-block' data-images='[{"alt":"Example of a blockquote component within a content page.","caption":"\nExample of a blockquote component within a content page.","url":"https://dds.dell.com/site/v3/components/blockquote/blockquote-usage.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

# Kinds

## Options

There are two options for how the source can be placed:

* **Default**: the source appears below the blockquote, styled in italics.
* **Inline**: the source can be placed within the preceding paragraph when the attribution reads more naturally in context. When using this option, apply italics manually.

<details data-name='image-block' data-images='[{"alt":"Example of default source","caption":"","url":"https://dds.dell.com/site/v3/components/blockquote/blockquote-kinds-1.png"},{"alt":"Example of inline source","caption":"","url":"https://dds.dell.com/site/v3/components/blockquote/blockquote-kinds-2.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

##Layout

### Alignment

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

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/components/blockquote/blockquote-layout.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

# Standards

## Accessibility

**Use blockquotes only for actual quotations**

Blockquotes carry semantic meaning and are announced as quotes by screen readers. Using them for styling alone confuses assistive‑technology users.
WCAG 2.2: [1.3.1: Info and Relationships](https://www.w3.org/TR/WCAG22/#info-and-relationships)

**Ensure sufficient text contrast**

Text inside blockquotes must meet minimum contrast ratios so users with low vision can read it clearly.WCAG 2.2: [1.4.3: Contrast (Minimum)](https://www.w3.org/TR/WCAG22/#contrast-minimum)

**Keep blockquote text readable when zoomed**

Users must be able to resize text up to 200% without losing content or requiring horizontal scrolling.WCAG 2.2: [1.4.4: Resize Text](https://www.w3.org/TR/WCAG22/#resize-text)

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                          | Collection | CSS var                                    | Preview  |
| ----------------------------- | ---------- | ------------------------------------------ | -------- |
| blockquote/gap                | Component  | `var(--dds-blockquote-gap)`                | \-       |
| blockquote/padding-horizontal | Component  | `var(--dds-blockquote-padding-horizontal)` | \-       |
| blockquote/padding-vertical   | Component  | `var(--dds-blockquote-padding-vertical)`   | \-       |
| color/text/secondary          | Semantic   | `var(--dds-color-text-secondary)`          | \#293B4D |
| color/text/primary            | Semantic   | `var(--dds-color-text-primary)`            | \#1D2C3B |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-blockquote--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-blockquote--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-blockquote--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-blockquote--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-blockquote--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-blockquote--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

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