quote

Short excerpt used to emphasize content or break up a large body of text

import { CdrQuote } from '@rei/cedar'

Live demo

Purpose

TypePurpose
Block quoteSeparates a large section of text, quoted from an external source.
Pull quotePulls a section of the article out of context and repeats to either give emphasis or aid the reader in scanning the article.

Usage

Block quote

When to use

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

When not to use

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

Pull quote

When to use

  • Attracting the user’s attention to article text
  • Breaking up a large body of text
  • Providing the reader with visual markers
  • Maintaining a sense of sequence and place

When not to use

  • Displaying a citation reference. Instead, use a block quote
  • Displaying for a decorative treatment only

Best practices

Do
A box representing a webpage shows a block quote appropriately placed near the surrounding text.

Do position the quote near the surrounding text.

Don't
A box representing a webpage shows a block quote positioned inappropriately at random.

Don't position quotes in a random location on the page.

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

Don't
A box representing a webpage shows a block quote inappropriately used to indent content.

Don't use for indenting text content.

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

Don't
A box representing a webpage shows too many block quotes used in a single article.

Don't use too many block quotes.

Do
Lines representing a block quote with an appropriately sized citation.

If using a block quote, do provide a citation to the external source and if available, the URL address.

Don't
Lines representing a block quote with a citation that's too prominent.

If using a block quote, don’t emphasize the citation.

Responsiveness

When displayed at an XS breakpoint:

  • Block quote text will use a smaller font size
  • Pull quote’s left border will appear below the quote and will use a smaller font size

Accessibility

Block quote

Don’t 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

What Cedar provides

Adds a <cite> element to refer to the source of the quote.

Development responsibilities

When using this component as a block quote, here's what you are responsible for:

Content must be quoted from another source. If it has a web address, cite it along with the source title using the <cite> attribute.

If using the <cite> attribute:

  • 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

Pull quote

What Cedar provides

Sets the aria-hidden="true" so the pull quote cannot be read by a screen reader.

Development responsibilities

When using this component as a pull quote, here's what you are responsible for:

  • Ensure text container does not exceed 634px or line length does not exceed more than 75 characters
  • Minimize use of reversed-out body copy (light copy on a dark background) because it’s harder to read

API

CdrQuote

Props

NameTypeDefault
tag

Sets the semantic HTML element for the quote. Possible values: blockquote, aside, q, div

string'blockquote'
modifier

Modifies the style variant for the quote

string''
summary

Sets the quote body text.

string
citation

Sets the quote attribution text.

string

Slots

Name
default