<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"The parts of the blockquote, labeled 1 and 2.","caption":"This component consists of two primary elements: the quote text and the citation source field.\n\n1. Quote text: the quotation.\n2. Citation field: the quote’s source.","url":"https://dds.dell.com/site/stage/b7/23/Blockquote_Anatomy_87d470f1f5.png"}]' data-numberofcolumns='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## 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.
<br></br>
**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

<details data-name='image-block' data-images='[{"alt":"Blockquote usage within a generic page mockup.","caption":"Offset blockquotes from the rest of the page text.","url":"https://dds.dell.com/site/stage/fa/87/Blockquote_Usage_a46e3ee04b.png"}]' data-numberofcolumns='1'></details>

## Color

### Light mode

All colors meet accessibility standards and match our [foundation palette](/foundations/color/).

<details data-name='color-collection' data-colors='[{"color":"Gray 800, #636363","useCase":"Blockquote body text","opacity":1,"colorBorder":""},{"color":"Gray 900, #0E0E0E","useCase":"Citation source field text","opacity":1,"colorBorder":""}]' data-displaymode='colorTable'></details>

## Layout

### Alignment

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

<details data-name='image-block' data-images='[{"alt":"Blockquote examples that are left-aligned, center-aligned, and right-aligned.","caption":"","url":"https://dds.dell.com/site/stage/14/e9/Blockquote_Alignment_d504d65056.png"}]' data-numberofcolumns='1'></details>

### Specifications

#### Breakpoints below 1023 pixels

<details data-name='image-block' data-images='[{"alt":"Blockquote padding for extra small to medium grids is 16 pixels on the top, bottom, left and right.","caption":"For extra small (XS) to medium (M) grid breakpoints, top, bottom, right, and left padding is 16 pixels.","url":"https://dds.dell.com/site/stage/07/e0/Blockquote_Sizing_Spacing_Small_Medium_b6a7171d2c.png"}]' data-numberofcolumns='1'></details>

#### Breakpoints above 1024 pixels

<details data-name='image-block' data-images='[{"alt":"Blockquote padding for large to 5XL grids is 16 pixels on the top and bottom, 32 pixels on the left and right.","caption":"For large (L) to 5XL grid breakpoints, top and bottom padding is 16 pixels, and right and left padding is 32 pixels.","url":"https://dds.dell.com/site/stage/91/a5/Blockquote_Sizing_Spacing_Large_5_XL_558d1db8df.png"}]' data-numberofcolumns='1'></details>

## 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.

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/index.html?path=/docs/components-blockquote--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-blockquote--basic&viewMode=docs&websiteFrame=true'></details>

Code

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

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-blockquote--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-blockquote--docs&viewMode=docs&websiteFrame=true'></details>

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

Blockquote

React update

<p>The DDS React library now contains all components available in the Angular and Vanilla component libraries.</p>


DDS React components

Home

About DDS

Figma

Data visualization

Migration guide

A11y annotation kit

AI chat toolkit

Contributor sandbox

Getting started

Changelog

Roadmap

Updates

Overview

Color

Elevation

Grid

Icons

Typography

Foundations

Accordion

Action menu

Badge

Breadcrumb

Button

Card

Carousel

Category navigation

Checkbox

Date picker

Divider

Drawer

Dropdown

File input

Footnote

Link

List

Loading indicator

Message bar

Modal

Notification

Overlay

Pagination

Popover

Progress bar

Progress tracker

Radio button

Search

Select

Side navigation

Switch

Table

Tabs

Text area

Text input

Time picker

Tooltip

View more/less

Components

Area chart

Bar chart

Bubble chart

Donut chart

Gauge chart

Line chart

Metrics card

Pie chart

Utilization chart

Dashboard template

Chart customization

Drag and drop

Empty state

Filter

Form

Microinteraction

Sign-in

Table view

Patterns

Accessibility

Brand

Partners

Case studies

FAQs

Tools

Videos

Dell Design System v1

Resources

Send Feedback

Check my tickets

Find us on Teams

Support