Page Loading

Quote

The quote component makes sure that quotes stand out from the rest of the content. Quotes can provide evidence or validity to back up the content on the page.

Quote example

We've included additional examples of how quotes should display on full width pages on different sites at the end of this page. 

How to use quotes

Use this component to draw attention to a quote from a source. Make sure to include the person’s name and their position. Only use quotes if they’re relevant to the rest of the content.  

Only use the quote component to include quotes from another source – don’t use it to refer to or highlight text that’s already elsewhere on the page.  

You can use a quote in a panel on its own, in a 50:50 alongside other content, or in an accordion. You can give it a grey background, or leave it with no background.  

Adding a quote in the CMS

Quote modifier rules

  • Background: default (white) or ‘background’ (grey)
  • Grid span: 8
    • Standard - applied at container level. Span removed on pages with left hand navigation
    • SDI - applied at panel level
  • Padding: default, unless required to improve layout  
  • Alignment: default 

Accessibility

Our quote component is marked up with the blockquote element for the quoted text, and the cite element for the author of the quote. This means that screen readers can understand what the text is.  

Avoid using italics within this component. Large chunks of text using italics can be harder to read for some users with dyslexia and visual impairments. 

Evidence and research

In testing users liked how the quotes are displayed. They also liked how the quote related to the content and found it easy to read.

Here's how a quote looks as standard

This applies to the majority of our sites, including Scottish Enterprise and Find Business Support, but not SDI. It's aligned to the left of the page, with a span of 8. We do this by adding it to a container first, then applying the span to the container. 

Here's how a quote should look on SDI

It's aligned to the centre of the page, with a span of 8. We do this by applying the span to the whole panel.