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.


Image showing proper block quote use.
Do position the quote near the surrounding text.
Image showing random block quotes in an article
Don't position quotes in a random location on the page.
Image showing proper block quote use.
Do use for emphasizing content or additional content.
Image showing random block quotes in an article
Don't use for indenting text content.
Image showing proper block quote position.
Do position quotes so users can visually scan the page.
Image showing too many block quotes in an 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

# Responsiveness

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


# API

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