Pull Quotes

Pull quotes are read from Presto and formatted with custom styles. They have a few configurable options as well.

Pull Quotes can be positioned with any of the standard asset positioning controls. Other options include reveal animations, suppressing the attribution and quote mark, and adding "Tweet" and "Share" buttons to the bottom of the quote. The colors of the quote text, the attribution text and the background color of the quote text when a share-enabled quote is hovered over on desktop can all be overridden.

When to use

At their core, pull quotes emphasize important ideas from stories and give them a visually prominent placement. Use them to add emphasize to key finds or create moments of greater emotional impact with dramatic quotes.

What about AMP and Apple News?

Since they are presto-based assets, pull quotes will appear on distributed platforms, but with the default visual style.

Options

Value Purpose Required Default
position Supports all standard positions
layout Supports all standard layouts
enableShare When set to true, adds "Tweet This" and "Facebook" share buttons below the quote. false
shareAttribution When set to true, includes the pull quote attribution in the text in the composed tweet. (Facebook has no pre-composed text.) false
serif When set to true, pullquote will display with serif text false
textSize Alters the size for the quote text. medium, large and xl are possible values. small
textAlign Aligns text and quote. Also can be center and right. When center, the decorative line will not render for design reasons. left
textLight When true, pullquote will use light-faced serif or sans-serif typefaces. false
hideLine When true, the decorative line is hidden. false
hideQuote When true, hides the decorative quote mark. This is useful when the selected text is not a direct quote of a person or document. false
hideAttribution When true, hides the attribution below the quote. This is useful when the selected text is from the article body text and not necessarily a direct quote of a person. false
themeColor When set to a valid CSS color, this will alter the color used to style the quote. Article themeColor
quoteTextColor A valid CSS color will set the color of the quote text. Article text color
attributionColor A valid CSS color will set the color of the attribution. #666
highlightColor A valid CSS color will set the color of the quote icon. if the icon is hidden, the decorative edge will display this color. Article themeColor

Example configuration

{assets.437856347850002}
position: left-rail
enableShare: true
shareAttribution: true
hideQuote: true
quoteTextColor: #660000
hideAttribution: true
attributionColor: #666666
highlightColor: #009b00
{}

Visually-enhanced pullquotes

To pair a pullquote with an image or video, see Visually-enhanced display.

Sharing on social media

An In-Depth pullquote with share buttons enabled

The pullquote comes equipped with several share buttons. A reader's impulse to share a story is an emotional one, often sparked by a strong sense of outrage or joy (depending on the topic). Pullquotes are emotional mile markers in the journey of reading a story, featuring choice quotes or passages that reflect the height of the storytelling. The share buttons are an attempt to capture the reader's emotional impulses at a time we reasonably expect them to be high (boosting engagement).

Enable the sharebuttons — globally or per asset — with enableShare:true. This will place five buttons on the quote, most of which shares the story url (but not the quote's location in the story). The first button copies the text of the quote to the clipboard, for easy sharing in the post. The next four share to Twitter, Facebook, LinkedIn and Reddit. Not all stories will need this combination of buttons. You should consult your editors, reporters and social gurus about which combination makes the most sense for the story you have.

Web share is not supported in all browsers at all sizes (Never in Firefox and only in Safari+Mac on desktop). For those instances, a standard email button is used in its place.

Each button can be turned off indvidually with:

Tip

Use the global asset configuration — {assets.*} — to set new default values. This would be a good way, for example, to enable sharing on all pullquotes.

Sharing analytics

Described in the analytics section below.

Animations

Pullquotes can optionally employ any of series of predefined reveal animations. These are good for adding emphasis to particularly meaningful pullquotes or adding emotional impact. Since visual features like these present diminishing returns (less effective the more they are used), we do not recommend using animations on ALL quotes. Similarly, mixing and matching animation styles probably isn't a good idea, either. See the demos for a complete list of options.

Value Purpose Default
animation The name of the desired animation which plays as the quote scrolls across the vertical halfway point of the viewport. Possible values include fade-1, line-1, text-accent-1, text-underline-1 and typewriter. See the demos for a complete list.
animationSpeed The speed, in CSS durations, of the animation. 600ms
accentText Some animations highlight portions of a pullquote. That text must be copied here and must match the quote text exactly.

Example

{assets.8675309}
enableShare: true
animation: text-underline-3
accentText: Inside of a dog it's too dark to read.
{}

See the animations in action: https://lab-microservices.production.gannettdigital.com/lab-microservices/in-depth/demos/#pull-quotes

Analytics

These analytics apply to shareable pull quotes, since they are the only kind with interactivity.

Event Label Category Action
In view in view scroll tracking shareable quote
Text copied shareable quote clicked copy content shareable quote
Share button used {network} share outbound links shareable quote

Live demos

Pullquotes in action: https://lab-microservices.production.gannettdigital.com/lab-microservices/in-depth/demos/#pull-quotes

Published examples