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.
Options available
Blockquote
An example of a blockquote with an attributed author along with their photograph and place of origin.
“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.”
- School of Biology
<!-- Begin pattern: blockquote //-->
<div class="row">
<div class="col-md-8">
<figure class="blockquote">
<blockquote>
<p>“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.”</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.
“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.”
- School of English, Publication title
<!-- Begin pattern: blockquote //-->
<div class="row">
<div class="col-md-8">
<figure class="blockquote">
<blockquote cite="http://www.st-andrews.ac.uk">
<p>“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.”</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 - pull quote
Increase the size of the font and reduce the length of characters for a pull quote that is repeating a short part of the main content.
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, auris ornare maximus risus at rhoncus.”
- School of Biology
<!-- Begin pattern: blockquote //-->
<div class="row">
<div class="col-md-8">
<figure class="blockquote">
<blockquote class="font-scale-2">
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, auris ornare maximus risus at rhoncus.”</p>
</blockquote>
<figcaption class="blockquote__author">
<div><strong>Dr Garrett Winters</strong> <br>- School of Biology</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.
“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.”
- Colorado, USA
<!-- Begin pattern: blockquote //-->
<figure class="blockquote blockquote--pull">
<blockquote>
<p>“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.”</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 //-->