When including a block quote, where possible, include the citation for the quote at the end of the block quote
These can only contain paragraphs followed by an optional citation at the end.
Do not allow copy to span more than eight columns at tablet or desktop screen sizes to ensure readability.
Examples
Inline quote
An inline quotation
.
Block quote
Content that is quoted from another source.
The source of the quote.
Content that is quoted from another source.
The source of the quote.
Content that is quoted from another source.
The source of the quote.
Notes for testers
Blockquotes do not show the fancy quote marks before an after the quote in browsers such as IE8.
Code Examples
Inline quote
An inline quotation
.
<p>...<q>...</q>....</p>Block quote
Content that is quoted from another source.
The source of the quote.
Content that is quoted from another source.
The source of the quote.
Content that is quoted from another source.
The source of the quote.
<blockquote class="blockquote [ Modifier ]">
<p>...</p>
<cite class="blockquote__cite">...</cite>
</blockquote>Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.blockquote |
Base style for block quote with a grey line above and below the quote | Yes | blockquote |
Meant for use in the middle of a large block of copy / article |
.blockquote--pullout |
Block quote modifier to pull block quote out into a grey background. | .blockquote |
Meant for highlighting a quote more than the base styling | |
.blockquote--highlight |
Block quote modifier to pull block quote out into a bright background. | .blockquote |
Meant for highlighting and drawing attention to a particular quote. Use once per page. |