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 #dont
  • 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 #dont
    • Displaying a citation reference. Instead, use a block quote
    • Displaying for a decorative treatment only ::

    When not to use

When not to use

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

unionblockquote
modifier

Modifies the style variant for the quote

union
summary

Sets the quote body text

string
citation

Sets the quote attribution text

string

Slots

Name
default