• Components/

Block Quote

Quote, CdrQuote

Short excerpt with an external citation and citation URL that is set off from the main body of text

# Overview

# Default (Medium)

Default block quote can be used with the following HTML tags: <p>, <div>, <aside>. This is responsive with styles for XS breakpoint.

View on GitHub
View on CodeSandbox (Vue 2)
View on CodeSandbox (Vue 3)

# Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • All recommendations listed for Paragraphs apply to this component
  • Do not use this component to indent text. Screen readers use the <blockquote> element to:
    • Provide semantic understanding of page content by announcing blockquote as quote
    • Define a sectioning root in HTML5, which means that any <h1> - <h6> element doesn't become part of the document’s outline
  • To make the blockquote content accessible, use the <cite> attribute with a valid URL

This component has compliance with WCAG guidelines by:

  • Adding a <cite> element to refer to the source of the quote

# Guidelines

# Use When

  • Highlighting valuable customer feedback
  • Encouraging a customer to try out an experience or product

# Don't Use When

  • Pulling a direct quote from an article. Instead, use Pull Quote
  • Displaying for a decorative treatment only

# The Basics

Use a block quote for emphasizing content that has a close and significant relationship with the surrounding text and will help users to visually scan the page.


A box representing a webpage shows a block quote appropriately placed near the surrounding text.
Do position the quote near the surrounding text.
A box representing a webpage shows a block quote positioned inappropriately at random.
Don't position quotes in a random location on the page.
A box representing a webpage shows a block quote intended to add emphasis or additional content to an article.
Do use for emphasizing content or additional content.
A box representing a webpage shows a block quote inappropriately used to indent content.
Don't use for indenting text content.
A box representing a webpage shows a block quote positioned appropriately so users can easily scan the page.
Do position quotes so users can visually scan the page.
A box representing a webpage shows too many block quotes used in a single article.
Don't use too many block quotes.

Provide a citation to the external source and if available, the URL address.


Image showing proper block citation.
Do provide a citation.
Image showing too improper citation style
Don't emphasize the citation.

# Content

To make the block quote content accessible, follow these rules:

  • Must be quoted from another source, whose address, if it has one, may be cited in the <cite> attribute
  • If the <cite> attribute is present:
    • Must be a valid URL
    • Link only to canonical end-state URLs with no parameter appended
    • Capitalize the cited source title the same as the author does
  • For more information, see REI Accessible Patterns: Quotes (opens new window)

# Responsiveness

When block quotes are displayed at XS breakpoint, the text will use a smaller font size.

# API

View it on Github: https://github.com/rei/rei-cedar-vue-2/tree/next/src/components/quote

# Props

tag

name

string

type

`blockquote`

default

Sets the ‘tag’ attribute for cdr-quote to define the root HTML element. Possible values: { ‘blockquote’ | ‘aside’ | ‘q’ | ‘div’ }

summary

name

string

type

default

Sets the quote body text.

cite

name

string

type

default

When the ‘tag’ prop is set to ‘blockquote’ provide a URL to the quote’s source. This does not render but is available to screen readers and search engines.

citation

name

string

type

default

Sets the quote attribution text.