Toggle navigation

Blocks

Blockquotes

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

  • 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.

Some users have difficulty reading text when there is not enough contrast between foreground and background colours. In order to meet the W3C Web Content Accessibility Guidelines 2.0 Level AA, the following classes for background and foreground colours should not be used: fg-aqua, bg-aqua, fg-gold, bg-gold, fg-lime, bg-lime, fg-yellow and bg-yellow.

Default blockquote

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.

<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>

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

Some users have difficulty reading text when there is not enough contrast between foreground and background colours. In order to meet the W3C Web Content Accessibility Guidelines 2.0 Level AA, the following classes for background and foreground colours should not be used: fg-aqua, bg-aqua, fg-gold, bg-gold, fg-lime, bg-lime, fg-yellow and bg-yellow.

Colours tested with WebAIM Color Contrast Checker http://webaim.org/resources/contrastchecker/

Top of page

Blockquote with cite

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.

Elvis A. Presley 
<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>
    <cite>Elvis A. Presley</cite>
</blockquote>

Use this blockquote to display a short quote and citation.

Some users have difficulty reading text when there is not enough contrast between foreground and background colours. In order to meet the W3C Web Content Accessibility Guidelines 2.0 Level AA, the following classes for background and foreground colours should not be used: fg-aqua, bg-aqua, fg-gold, bg-gold, fg-lime, bg-lime, fg-yellow and bg-yellow.

Colours tested with WebAIM Color Contrast Checker http://webaim.org/resources/contrastchecker/

Top of page

Blockquote floated right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

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.

Elvis A. Presley

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.

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.

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.

<blockquote class="pull-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>
    <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>

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.

Some users have difficulty reading text when there is not enough contrast between foreground and background colours. In order to meet the W3C Web Content Accessibility Guidelines 2.0 Level AA, the following classes for background and foreground colours should not be used: fg-aqua, bg-aqua, fg-gold, bg-gold, fg-lime, bg-lime, fg-yellow and bg-yellow.

Colours tested with WebAIM Color Contrast Checker http://webaim.org/resources/contrastchecker/

Top of page

Blockquote floated left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

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.

Elvis A. Presley

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.

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.

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.

<blockquote class="pull-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>

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.

Some users have difficulty reading text when there is not enough contrast between foreground and background colours. In order to meet the W3C Web Content Accessibility Guidelines 2.0 Level AA, the following classes for background and foreground colours should not be used: fg-aqua, bg-aqua, fg-gold, bg-gold, fg-lime, bg-lime, fg-yellow and bg-yellow.

Colours tested with WebAIM Color Contrast Checker http://webaim.org/resources/contrastchecker/

Top of page

Coloured blockquote box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla odio, aliquet et commodo sit amet, molestie eget metus. Vestibulum in dui vehicula mi sollicitudin fringilla ac a odio. Sed nulla sem, scelerisque at ultricies non, tempus nec odio. Suspendisse eleifend iaculis ultricies. Praesent nulla odio, aliquet et commodo sit amet, molestie eget metus.

Mauris in massa turpis 
<blockquote class="bg-blue fg-white georgia">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla odio, aliquet et commodo sit amet, molestie eget metus. Vestibulum in dui vehicula mi sollicitudin fringilla ac a odio. Sed nulla sem, scelerisque at ultricies non, tempus nec odio. Suspendisse eleifend iaculis ultricies. Praesent nulla odio, aliquet et commodo sit amet, molestie eget metus.</p>
    <cite>Mauris in massa turpis</cite>
</blockquote>

Background classes available

Use fg-white with the following background colours:

  • bg-blue
  • bg-charcoal
  • bg-darkgrey
  • bg-green
  • bg-pink
  • bg-purple
  • bg-black
  • bg-red

Use fg-black or fg-darkgrey with the following background colour:

  • bg-lightgrey

Background classes that should not be used

Some users have difficulty reading text when there is not enough contrast between foreground and background colours. In order to meet the W3C Web Content Accessibility Guidelines 2.0 Level AA, the following classes for background colours should not be used: bg-aqua, bg-gold, bg-lime and bg-yellow.

Other background classes

You can also use background colour tints. Make sure these are used with 100% colours, for example: fg-purple and bg-purple-20. Colour contrast should be checked in a contrast checker such as WebAIM Color Contrast Checker or Colorable.

Foreground classes available (only use with .bg-white)

  • fg-blue
  • fg-green
  • fg-purple
  • fg-black
  • fg-charcoal
  • fg-darkgrey
  • fg-pink
  • fg-red
  • fg-white - use with any colour above

Some users have difficulty reading text when there is not enough contrast between foreground and background colours. In order to meet the W3C Web Content Accessibility Guidelines 2.0 Level AA, the following classes for background and foreground colours should not be used: fg-aqua, bg-aqua, fg-gold, bg-gold, fg-lime, bg-lime, fg-yellow and bg-yellow.

You can also use background colour tints. Make sure these are used with 100% colours, for example: fg-purple and bg-purple-20. Colour contrast should be checked in a contrast checker such as WebAIM Color Contrast Checker or Colorable.

Top of page

Blockquote using Georgia

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla odio, aliquet et commodo sit amet, molestie eget metus. Vestibulum in dui vehicula mi sollicitudin fringilla ac a odio. Sed nulla sem, scelerisque at ultricies non, tempus nec odio. Suspendisse eleifend iaculis ultricies. Praesent nulla odio, aliquet et commodo sit amet, molestie eget metus.

Mauris in massa turpis 
<blockquote class="fg-purple bg-purple-20 georgia">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla odio, aliquet et commodo sit amet, molestie eget metus. Vestibulum in dui vehicula mi sollicitudin fringilla ac a odio. Sed nulla sem, scelerisque at ultricies non, tempus nec odio. Suspendisse eleifend iaculis ultricies. Praesent nulla odio, aliquet et commodo sit amet, molestie eget metus.</p>
    <cite>Mauris in massa turpis</cite>
</blockquote>

Use the class georgia to use the Georgia serif font.

Some users have difficulty reading text when there is not enough contrast between foreground and background colours. In order to meet the W3C Web Content Accessibility Guidelines 2.0 Level AA, the following classes for background and foreground colours should not be used: fg-aqua, bg-aqua, fg-gold, bg-gold, fg-lime, bg-lime, fg-yellow and bg-yellow.

You can also use background colour tints. Make sure these are used with 100% colours, for example: fg-purple and bg-purple-20. Colour contrast should be checked in a contrast checker such as WebAIM Color Contrast Checker or Colorable.

Top of page

Blockquote using Georgia with borders

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla odio, aliquet et commodo sit amet, molestie eget metus. Vestibulum in dui vehicula mi sollicitudin fringilla ac a odio. Sed nulla sem, scelerisque at ultricies non, tempus nec odio. Suspendisse eleifend iaculis ultricies.

Mauris in massa turpis 
<blockquote class="fg-green bg-white georgia quote-border">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla odio, aliquet et commodo sit amet, molestie eget metus. Vestibulum in dui vehicula mi sollicitudin fringilla ac a odio. Sed nulla sem, scelerisque at ultricies non, tempus nec odio. Suspendisse eleifend iaculis ultricies. Praesent nulla odio, aliquet et commodo sit amet, molestie eget metus.</p>
    <cite>Mauris in massa turpis</cite>
</blockquote>

Use the class quote-border and any foreground colour classes listed below:

Foreground classes available (only use with .bg-white)

  • fg-blue
  • fg-green
  • fg-purple
  • fg-black
  • fg-charcoal
  • fg-darkgrey

You can also use background colour tints. Make sure these are used with 100% colours, for example: fg-purple and bg-purple-20. Colour contrast should be checked in a contrast checker such as WebAIM Color Contrast Checker or Colorable.

Other foreground classes available

The use of following classes should only be used with caution. (See accessibility tab).

  • fg-pink
  • fg-red
  • fg-white - use with any colour above

The use of following classes has now been deprecated. (See accessibility tab).

  • fg-lime
  • fg-yellow
  • fg-gold
  • fg-aqua

Some users have difficulty reading text when there is not enough contrast between foreground and background colours. In order to meet the W3C Web Content Accessibility Guidelines 2.0 Level AA, the following classes for background and foreground colours should not be used: fg-aqua, bg-aqua, fg-gold, bg-gold, fg-lime, bg-lime, fg-yellow and bg-yellow.

You can also use background colour tints. Make sure these are used with 100% colours, for example: fg-purple and bg-purple-20. Colour contrast should be checked in a contrast checker such as WebAIM Color Contrast Checker or Colorable.

Top of page

Changelog

Added Updates Current version Accessibility Status
10 Aug 2016 N/A 1.0.0 Needs review Current

Top of page