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

  • Components/

Pull Quote

Quote, CdrQuote

Short excerpt taken from the main body of text to give a dominant position

# Overview

# Default (Medium)

Default pull quote can be used with the following HTML tags: <p>, <div>, <aside>. For XS breakpoint, a border is added below the pull quote and the font size is smaller.

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

This component has compliance with WCAG guidelines by:

  • Setting the aria-hidden="true" so that the pull quote cannot be read by a screen reader

# Guidelines

# Use When

  • 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

# Don't Use When

  • Displaying a citation reference. Instead, use Block Quote
  • Displaying for a decorative treatment only

# The Basics

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


Pull quote correctly positioned near article text.
Do position the quote near the surrounding text.
Pull quote incorrectly indented in an article.
Don't use for indenting text content.
Pull quote correctly used to emphasize the page's content.
Do use for emphasizing content or additional content.
A page incorrectly using too many pull quotes.
Don't use too many pull quotes.
Pull quote correctly placed in relation to the article text.
Do relate the quote to the surrounding text.
Pull quote incorrectly positioned randomly on a page.
Don't position quotes in a random location on the page.

# Responsiveness

When a pull quote is displayed at XS breakpoint, the left border will appear below the pull quote and 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

enum

type

`blockquote`

default

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

modifier

name

string

type

default

Modifies the style variant for this component. Possible values: { ‘pull’ }

role

name

string

type

default

Sets the ‘role’ attribute to ‘presentation’ when creating a pull quote. Possible values: { ‘presentation’ }

aria-hidden

name

string

type

default

Sets the ‘aria-hidden’ attribute to ‘true’ when creating a pull quote. Possible values: { ‘true’ }

summary

name

string

type

default

Sets the pull quote body text.

citation

name

string

type

default

Sets the pull quote attribution text.