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

Quotes should be aligned to the left hand side of the page on Scottish Enterprise and Find Business Support. We do this by adding the quote component into a container. This doesn't apply to 50:50 panels.

Using a template

To add a quote component to a page, you should add a new panel, and then use one of the quote templates. These include some 50:50 panel options. Templates will usually have the correct modifiers and containers applied, although you may need to adjust these to suit your page design. 

On pages that use left hand navigation, you'll need to remove the 8 span from the container. 

From scratch

If you're not using a template, you should first add a container to the panel you want to add a quote to. Then add the quote component within the container, and any components you need within the inset text. You'll need to apply a span of 8 to the container, unless the page uses left hand navigation. 

If you're adding a quote to a 50:50 panel, you should follow the 50:50 panel guidelines 

Quotes should be aligned to the centre of the page on SDI. This will happen automatically when you reduce the span of the panel.

Using a template

To add a quote component to a page, you should add a new panel, and then use one of the quote templates. These include some 50:50 panel options. Templates will usually have the correct modifiers and containers applied, although you may need to adjust these to suit your page design. 

From scratch

If you're not using a template, you can just add a quote component to a new or existing panel or container. You'll need to apply a span of 8 to the panel, unless you're using to 50:50 layout.

If you're adding a quote to a 50:50 panel, you should follow the 50:50 panel guidelines 

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.