Back to the pattern library

Quotations

When you type ‘ on your computer it is not a true quotation mark. True quotes are called smart quotes and the right one must be used according to whether you are opening (‘) or closing (’) a quotation. Find out about HTML character codes.

More detailed information on how to use our typography can be found in our design guidance.

Example

Example

HTML

<blockquote>
    <p>&lsquo;Use hanging punctuation to style a quotation. A &#8220;quote within a quote&#8221; should use double quotation&nbsp;marks.&rsquo;</p>
    <cite>The design team</cite>
</blockquote>

<blockquote>
    <p class="coop-beta">‘Or you can have a bigger&nbsp;one.’</p>
    <cite>The design team</cite>
</blockquote>

SCSS

The styles for this pattern can be found in the foundations on github.

JS

There is no javascript needed for this component.

Design and content

Quotes are set with:

  • 20px (32px line spacing) in Avenir medium - standard size
  • 26px (40px line spacing) in Avenir medium - large size
  • citations of 20px in Avenir regular

‘Use hanging punctuation to style a quotation. A “quote within a quote” should use double quotation marks.’

Accessibility

We are currently working on this.

For more information see our general guide on accessibility.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change