Pull Quote

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.

# Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • All recommendations listed for Paragraphs component 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.


Image showing proper pull quote use.
Do position the quote near the surrounding text.
Image showing improper pull quote use in an article
Don't use for indenting text content.
Image showing proper pull quote use.
Do use for emphasizing content or additional content.
Image showing too many pull quotes in an article
Don't use too many pull quotes.
Image showing proper pull quote use.
Do relate the quote to the surrounding text.
Image showing improper pull quote use in an article
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

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