Blockquote

The blockquote pattern is used to display a quote from a person or written excerpt.

Rules for blockquote

Should be used for quotes within content that are typically larger than a sentence. Shorter quotes should use the <q> tag instead.
Can be used for standalone quotes on full width page layouts.
An author must be associated with a quote.
An image of the author and additional information about them are optional.
Author images must be 120 by 120 pixels.
Author images must be a high quality portraiture headshot of the named person.
Citations can be added alongside the author, with a link to a citation added as an attribute to the <blockquote> element.

Blockquote

An example of a blockquote with an attributed author along with their photograph and place of origin.

Example

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare maximus risus at rhoncus. Etiam sagittis, neque eu condimentum suscipit, justo neque aliquam eros, id porta ligula orci id elit. Nullam maximus erat sed sem vulputate vehicula. Sed dictum lectus ligula, ac gravida ex tempor ac.”

Dr Garrett Winters
- School of Biology

Code

<!-- Begin pattern: blockquote //-->
<div class="row">
    <div class="col-md-8">
<figure class="blockquote">
    <blockquote>
        <p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare maximus risus at rhoncus. Etiam sagittis, neque eu condimentum suscipit, justo neque aliquam eros, id porta ligula orci id elit. Nullam maximus erat sed sem vulputate vehicula. Sed dictum lectus ligula, ac gravida ex tempor ac.&rdquo;</p>
    </blockquote>
    <figcaption class="blockquote__author">
        <div class="blockquote__author-thumbnail">
            <img src="../../assets/docs/images/profile-pictures/male-001-medium.jpg" alt="Dr Garrett Winters">
        </div>
        <div><strong>Dr Garrett Winters</strong> <br>- School of Biology</div>
    </figcaption>
</figure>
</div>
</div>
<!-- End pattern: blockquote  //-->

Blockquote with citation

An example of a blockquote where the author has cited their publication and provided a url for further details.

Example

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare maximus risus at rhoncus. Etiam sagittis, neque eu condimentum suscipit, justo neque aliquam eros, id porta ligula orci id elit. Nullam maximus erat sed sem vulputate vehicula.
Integer at congue libero. Ut placerat ullamcorper efficitur. Cras elementum pharetra enim in egestas. Pellentesque sed turpis pulvinar, rhoncus felis vel, condimentum elit. Integer tempus efficitur dolor. Donec vitae sem scelerisque, sollicitudin nisi sed, faucibus nisl. Cras feugiat ligula a consectetur lacinia.Integer at congue libero. Ut placerat ullamcorper efficitur. Cras elementum pharetra enim in egestas. Pellentesque sed turpis pulvinar, rhoncus felis vel, condimentum elit. Integer tempus efficitur dolor. Donec vitae sem scelerisque, sollicitudin nisi sed, faucibus nisl. Cras feugiat ligula a consectetur lacinia.”

Professor Sonya Frost
- School of English, Publication title

Code

<!-- Begin pattern: blockquote //-->
<div class="row">
    <div class="col-md-8">
<figure class="blockquote">
    <blockquote cite="http://www.st-andrews.ac.uk">
        <p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare maximus risus at rhoncus. Etiam sagittis, neque eu condimentum suscipit, justo neque aliquam eros, id porta ligula orci id elit. Nullam maximus erat sed sem vulputate vehicula.</p><p>Integer at congue libero. Ut placerat ullamcorper efficitur. Cras elementum pharetra enim in egestas. Pellentesque sed turpis pulvinar, rhoncus felis vel, condimentum elit. Integer tempus efficitur dolor. Donec vitae sem scelerisque, sollicitudin nisi sed, faucibus nisl. Cras feugiat ligula a consectetur lacinia.Integer at congue libero. Ut placerat ullamcorper efficitur. Cras elementum pharetra enim in egestas. Pellentesque sed turpis pulvinar, rhoncus felis vel, condimentum elit. Integer tempus efficitur dolor. Donec vitae sem scelerisque, sollicitudin nisi sed, faucibus nisl. Cras feugiat ligula a consectetur lacinia.&rdquo;</p>
    </blockquote>
    <figcaption class="blockquote__author">
        <div><strong>Professor Sonya Frost</strong> <br>- School of English, <cite>Publication title</cite></div>
    </figcaption>
</figure>
</div>
</div>
<!-- End pattern: blockquote  //-->

Blockquote - full width

An example of a blockquote on a full width page.

The maximum number of characters for this type of quote should be no larger than 300.

Example

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare maximus risus at rhoncus. Etiam sagittis, neque eu condimentum suscipit, justo neque aliquam eros, id porta ligula orci id elit. Nullam maximus erat sed sem vulputate vehicula. Sed dictum lectus ligula, ac gravida ex tempor ac.”

Olivia Liang
- Colorado, USA

Code

<!-- Begin pattern: blockquote //-->
<figure class="blockquote blockquote--pull">
    <blockquote>
        <p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare maximus risus at rhoncus. Etiam sagittis, neque eu condimentum suscipit, justo neque aliquam eros, id porta ligula orci id elit. Nullam maximus erat sed sem vulputate vehicula. Sed dictum lectus ligula, ac gravida ex tempor ac.&rdquo;</p>
    </blockquote>
    <figcaption class="blockquote__author">
        <div class="blockquote__author-thumbnail">
            <img src="../../assets/docs/images/profile-pictures/female-002-medium.jpg" alt="Olivia Liang">
        </div>
        <div><strong>Olivia Liang</strong> <br>- Colorado, USA</div>
    </figcaption>
</figure>
<!-- End pattern: blockquote  //-->