Pull quotes

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

Pull quotes are not the same as the HTML tags <cite> and <blockquote>. However, these HTML tags can still be used within ANU webpages, please view our text overview section.

Overview

Width

The width for a pull quote by default is 50% of its parent container. For example, if the pull quote is put in a col-12 container (container width: 12 columns), the pull quote will take up 6 columns. If the pull quote is put in a col-6 container, the pull quote will take up 3 columns. You can add a width class to override this default width. Please see 'Use cases' tab for examples.

 

Float

Since the pull quote only takes up 50% of its parent container's width, by adding .left or .right to the pull quote container, will make it left or right-aligned. In addition, the following text content will wrap around the pull quote. If no float class has been specified, the following text content will not wrap around.

Available float classes
Class nameDescription
.leftFloat the pull quote to left, and add a 20px margin to the right.
.rightFloat the pull quote to right, and add a 20px margin to the left.
 

Implementation

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

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

Code Structure
<div class="pullquote left">
                    <p>This is an example of a pull quote. The text is slightly larger than regular text, centre-aligned, and contained in quotation marks.</p>
                </div>

Use cases

You can override the default width (50%) and the font colour (black) by using our width and font colour classes.

Example 1: Pull quote with .w80

Sit amet dictum sit amet justo donec enim diam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit eget gravida cum sociis natoque penatibus et magnis. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque.

Code Structure
                <div class="pullquote left w80">
                    <p> Sit amet dictum sit amet justo donec enim diam.</p>
                </div>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit ...
                </p>
 

Example 2: Pull quote with .text-unigrey

Sit amet dictum sit amet justo donec enim diam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit eget gravida cum sociis natoque penatibus et magnis. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque.

Code Structure
                <div class="pullquote left text-unigrey">
                    <p> Sit amet dictum sit amet justo donec enim diam.</p>
                </div>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit ...
                </p>
 

Example 3: Pull quote with .text-gold

In order to pass WA, please add <strong> tag to the text.

Sit amet dictum sit amet justo donec enim diam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit eget gravida cum sociis natoque penatibus et magnis. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque.

Code Structure
                <div class="pullquote left text-gold">
                    <p> <strong>  Sit amet dictum sit amet justo donec enim diam. </strong> </p>
                </div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit ...
                </p>