- Taxonomic name: A-QUOTE
- Extension: QUOTES
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.6.0 (20/04/21)
Quote
Design and usage
- When including a block quote, include the citation for the quote at the end of the quote whenever possible
- 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
Interactive example
Code example
Inline English
<p>...<q>...</q>....</p>Inline French
<p>...<q class="a-quote-inline--chevron">...</q>....</p>Block quote English
Interactive example
Code example
<blockquote class="a-quote [ Modifier ]">
<p>...</p>
<cite class="a-quote__citation">...</cite>
</blockquote>Block quote French
Interactive example
Code example
<blockquote class="a-quote a-quote--chevron [ Modifier ]">
<p>...</p>
<cite class="a-quote__citation">...</cite>
</blockquote>Block quote with hidden quotation marks
Interactive example
Code example
<blockquote class="a-quote a-quote--hidden [ Modifier ]">
<p>...</p>
<cite class="a-quote__citation">...</cite>
</blockquote>Development and test
Notes for developers
Extension component
This component forms part of the 'quotes' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/quotes.css" rel="stylesheet" />Notes for testers
blockquotes do not show the fancy quote marks before an after the quote in browsers such as IE8.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.a-quote-inline--chevron |
Inline quote modifier to display chevron quotation marks. | q |
Inline chevron quotation marks variant | |
.a-quote |
Base style for block quote with a grey line above and below the quote | Yes | a-quote |
Meant for use in the middle of a large block of copy / article |
.a-quote--chevron |
Block quote modifier to display french quotation marks. | .a-quote |
Chevron quotation marks variant | |
.a-quote--hidden |
Block quote modifier to hide the quotation marks. | .a-quote |
Hidden quotation marks variant | |
.a-quote--pullout |
Block quote modifier to pull block quote out into a grey background. | .a-quote |
Meant for highlighting a quote more than the base styling | |
.a-quote--highlight |
Block quote modifier to pull block quote out into a bright background. | .a-quote |
Meant for highlighting and drawing attention to a particular quote. Use once per page. | |
.a-quote__citation |
Base style for a quote citation at the end of the quote | Yes | .a-quote > cite |
Must be the last element inside the block quote |
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.6.0 (20/04/21)
Latest update:
- updated: Colours used for quotes and block quotes on the B2B and Business themes have been updated from pink to Boston Blue and Raven Black respectively. This is to better harmonise the components when used with these themes.