Pull quotes

Pull quotes can be used to highlight text or to indicate a quote.

This is an example of a pull quote. The text is slightly larger than regular text, centred, and contained in quotation marks.

Surrounding text will automatically wrap around a left or right aligned pull quote. If no alignment is specified, the text will not wrap.

If you use the left class, a 20px margin is added to the right, if you use the right class, a 20px margin is added to the left, and if you use no alignment class, no margin is added at all.

The width of a pull quote defaults to 50 per cent of the container it is within. So, if the pull quote is in a narrow container, the width will be 100px. If the pull quote is in a doublewide container, the width will be 340px. You can override this default by using a width class.

Implementation

Unlike most classes, pull quotes have a specific implementation. You must add the pullquote class to a DIV for it to work properly.

<div class="pullquote left">
  <p>Text of the left aligned pull quote.</p>
</div>

<div class="pullquote right">
  <p>Text of the right aligned pull quote.</p>
</div>
 

Pull quotes are not the same thing as the HTML tags <cite> and <blockquote>. These tags can and should still be used within ANU webpages. Refer to Text styles.

Updated:  18 August 2017/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle