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 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>
<p class="staff-profile-quote font-type-2 is-italic">Professor Anna Nekaris is a Professor in Anthropology and Primate Conservation studying the unique group of evolutionary distinct primates known as the Asian lorises. Her studies cover all eleven species, including six she named or elevated from subspecies. Anna is the Course Tutor for the highly acclaimed MSc Primate Conservation, Director of the Little Fireface Project and Convenor of the Nocturnal Primate Research Group.</p>
</blockquote><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, ‘successful’ refugee integration and to inform policies related to supporting everyday family practices.</p>
<cite style="font-style:normal;">Professor Tina Miller</cite>
</blockquote>- 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
blockquotefor text indentation.
N/A