Styling Quotes

Block quotes and pull quotes (callouts) draw attention to quoted material on a page while simultaneously adding interest to the layout. This page explains the differences, and how to create them with the visual editor.

Introduction

Block quotes and pull quotes are often used in publications to draw a reader into a story, or to highlight key points.  With the web system, it's now possible to select portions of text and apply such styling, but it's important to know the differences between the two and the correct ways to implement them.

Block Quotations

Block quotes take a sizable external citation (a quote from another site, article, book, etc)—in short, a quotation not otherwise appearing on the page—and sets it apart from the main text like so:

This is a block quote.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac felis et libero scelerisque aliquam vel id augue. Maecenas arcu purus, feugiat eu fringilla in, venenatis eget dui. Aliquam euismod metus neque, sit amet pretium magna aliquet non. Quisque quis ligula elementum nunc ornare convallis.

— Author Name, University of Lorem Ipsum

At present, creating a block quote in particular requires using the "HTML" button on the toolbar to edit the page code (pull quotes don't require this). 

To create a block quote:

  1. Type or find the quotation that you want to style in the body text area as it's own paragraph
  2. Click the 'HTML' icon on the toolbar
  3. Find the text in the HTML window, and wrap it in opening and closing <blockquote></blockquote> tags.
  4. Hit Update.  That's it!

Pull Quotations (Callouts)

Pull quotes, or callouts, are shorter excerpts from the current article that are, as those terms suggest, pulled aside to be highlighted. Unlike block quotes, they should repeat content that's already there on the page.  Here's an example of a pull quote in relation to normal text:

This is a pull quote. Vivamus in vehicula neque. Vivamus consectetur mi id massa consequat, eu bibendum justo auctor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In auctor eros vitae mi consectetur, nec condimentum orci commodo. Aliquam placerat magna eu gravida pulvinar. Nullam purus quam, volutpat vitae turpis eget, ultricies pharetra lorem. Aliquam lacinia, dui fermentum tincidunt dignissim, eros erat sollicitudin lacus, at viverra elit mi non metus. Mauris fermentum blandit ornare. Here's the original quote (bolded for emphasis): Vivamus in vehicula neque. Vivamus consectetur mi id massa consequat, eu bibendum justo auctor. Pellentesque posuere, lectus sed venenatis tristique, velit massa semper lacus, a euismod ante massa sed odio.

Donec ac sollicitudin orci. Nulla arcu urna, vehicula id elit id, imperdiet suscipit urna. Duis eget dignissim erat. Proin viverra luctus nisi blandit pretium. Proin ultricies enim diam, eget tincidunt nulla condimentum at. Vivamus venenatis metus vitae facilisis gravida. Sed convallis ultricies risus vel gravida.

 

To create a pull quote:

  1. Find the text that you want to create a pull quote from
  2. Copy it (Ctrl+C, or use the copy icon on the editor toolbar)
  3. Click to insert your cursor vertically where you want to pull quote to appear on the page, then paste
  4. Select that newly pasted, duplicate text
  5. Click the "Style..." dropdown and select either "pullquote" or "callout" (the same thing)

By default, the system floats pull quotes to the right.  To float them to the left after creating them:

  1. Click the "HTML" button on the toolbar
  2. Find <p class="callout"> or <p class="pullquote"> and add a class of "left" (resulting in <p class="callout left"> or <p class="pullquote left">)
  3. Click Update