This is Cedar’s legacy site. Information may be outdated.
Go to Cedar's new documentation site for the latest features and support.

Block Quote

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.

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