UCSF

Quotation Styles

There are a number of ways to style a quotation. This page helps you understand the different ways and how to achieve them when authoring content.

On this page

Inline quote

An inline quote is used when a quote appears within body text. This is the most typical kind of quote and doesn’t need further explanation. Example:

inline quotation example

Inline quote with attribution

Sometimes an inline quote additionally specifies the speaker’s name outside of prose on a separate line. Example:

inline quote with attribution

To achieve this result, press Shift+Enter at the end of the quote to insert a manual line break, then type an em dash followed by the name. No spaces should appear before or after the em dash. Advanced users: the source code for this example looks like this:

<p>“There are lots of important problems. Only attack those for which you can divine simple experiments with clear answers.”<br>—Julius Axelrod</p>

Block quote

A block quote is used when quoting a passage, usually more than one sentence, usually adjacent to other body text. Attribution, if present, occurs in prose either before or after—never on one or more separate lines. Example:

block quotation example

Here the portion of text with the vertical line along the left edge represents the block quote. To specify a block quote, use button #11 as described at Editing Pages with WebEdit. This button has a double closing quotation mark symbol. Advanced users: this marks your code with the <blockquote> element.

Block quotes should never include quotation marks at the start or end; the vertical line provides the indication to the reader that it is quoted material.

Block quotes should never include an attribution line below. Instead, work the attribution into the body copy before the block quote.

Pull quote

A pull quote is a graphic design element which originated with print publications such as newspapers and magazines. The idea is that prominent, larger pull quotes set amidst smaller body text would grab the reader’s eye, encouraging them to read an article that they might not otherwise have read.

Example 1: Full Width

screenshot

How to add a full width pull quote

  1. Type the quoted material on its own new line. Do not include quotation marks. Press Enter at the end of the line.
  2. Type an em dash followed by the quoted person’s name. Do not use a space character after the em dash.
  3. (Optional) Type Shift+Enter to add one or more lines following the name to specify a title or other info.
  4. Select all of the lines you have typed.
  5. Select the DIV button.
  6. In the Style picklist, select pull quote.

Advanced users

The source code for this example looks like this:

<div class="pull-quote">
<p>UCSF has put its stake in the ground on exposing industry manipulation of science.</p>
<p>—Dorie Apollonio, PhD<br>
Professor, Department of Clinical Pharmacy</p>
</div>

Note the distinction between the pull quote style and the emphatic style: use pull quote when you are quoting a person; use emphatic to emphasize what the page author is saying. Pull quote automatically includes quotation marks; emphatic does not. Example: Taking a bite out of the proteome with PhaNGS uses emphatic instead of pull quote because these are the words of the page author, not someone interviewed for the story.

Example 2: Half Width Floated Left

screenshot

How to add a half width pull quote floated left

Follow the steps above but choose pull quote left.

    Advanced users

    The source code for this example looks like this:

    <div class="pull-quote left">
    <p>One thing that Esteban demands of us is to find ways to serve.</p>
    <p>–Andrew Zeiger<br />
    Junior Researcher, Burchard Lab</p>
    </div>​

    Example 3: Half Width Floated Right

    screenshot

    How to add a half width pull quote floated right

    Follow the steps above but choose pull quote right.

      Advanced users

      The source code for this example looks like this:

      <div class="pull-quote right">
      <p>One thing that Esteban demands of us is to find ways to serve.</p>
      <p>–Andrew Zeiger<br />
      Junior Researcher, Burchard Lab</p>
      </div>