1. Design System
  2. Base
  3. Typography
  4. Blockquotes

Blockquotes Updated

Blockquotes - also known as 'pull quotes' - can be used within a page to highlight a point within the text, or to quote a person.

Note: Paragraphs and list items have a max width of 858px to maintain readability.

Default blockquote

Use this basic blockquote to display a short quote or passage from the main content.

<blockquote>
  <p>I was always keen to study at university level but also wanted to stay close to home, so I could combine studying with my day job as customer service assistant at British Petroleum. The degree has helped develop my knowledge and skills in business management and it’s boosted my confidence.</p>
</blockquote>

Blockquote with cite

Use this blockquote to display a short quote and citation.

<blockquote>
    <p>Love me tender, love me sweet, never let me go. You have made my life complete, and I love you so. Love me tender, love me true, all my dreams fulfilled. For my darlin' I love you, and I always will.</p>
    <p><cite>Elvis A. Presley</cite></p>
</blockquote>

Blockquote floated right

Use the class pull-right to float a blockquote to the right inside the main content. This should be placed before the main content.

On small devices the blockquote will be full-width with no float.

<blockquote class="is-pulled-right">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    <p><cite>Elvis A. Presley</cite></p>
</blockquote>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>

Blockquote floated left

Use the class pull-left to float a blockquote to the left inside the main content. This should be placed before the main content.

On small devices the blockquote will be full-width with no float.

<blockquote class="is-pulled-left">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    <cite>Elvis A. Presley</cite>
</blockquote>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>

Blockquote using Georgia

Make blockquotes serif type using the .font-type-2 class.

<blockquote>
    <p class="staff-profile-quote font-type-2 is-italic">Everything you need to know about applying for your accommodation - including information for students with a medical condition or disability, couples and families, international students, estranged students, and care leavers.</p>
</blockquote>

Blockquote with borders

Make blockquotes serif type using the .font-type-2 or .georgia classes.

<blockquote class="has-borders">
    <p class="is-size-5 font-type-2">It is a great honour to receive this recognition from the THE Awards.  The objective of the research has been to contribute to our critical  understanding of what is regarded as good fatherhood, &lsquo;successful&rsquo;  refugee integration and to inform policies related to supporting  everyday family practices.</p>
    <cite style="font-style:normal;">Professor Tina Miller</cite>
</blockquote>

Usage

  • It is effective at highlighting part of a post that you particularly want visitors to read.
  • Blockquotes can span the width of the central column (useful when there is not much text within the central column), or they can be floated left or right of the text.
  • Do not use quotation marks at the beginning/end of a quote as these are automatically added with CSS (cascading style sheet).
  • Also, try to limit the number of lines over which the quote runs - as a guide, no more than four lines.
  • Do not use blockquote for text indentation.

Accessibility

N/A