Quote ​

Quotes can be used to include a citation into your page content or to highlight an excerpt from a body text. They call for users' attention and display information that is always relevant to the context. Quotes are also a good way to help users visually scan a page.

Usage guidelines ​

When to use ​
  • To include and highlight an external quote that is relevant to the context.
  • To highlight an important statement within text paragraphs or to break a large body of text.
When not to use ​
  • As decorative element only.
Writing guidelines ​

Punctuation

Do not include quotation marks but include any other punctuation needed.

Capitalization and case

Write quotes in sentence case.

Text length

While quotes can vary in length, try to keep the text two sentences long or less.

Specifications ​

Anatomy ​

  1. Quotation mark
  2. Quote
  3. Author name: (optional)
  4. Description: (optional)
  5. Author image: (optional)

Size ​

Quote component is available in four sizes: large, medium, small and extra-small, each corresponding to one of the four breakpoints (desktop, tablet landscape, tablet portrait and mobile).

Styling ​

  • Quote is available in both light and dark theme.
  • You can change the background color to any of the brand or secondary palette colors. Always make sure there is enough contrast between the text and the background.
  • You can and decide to either show the image and author's name (external citation) or not (excerpt from the text).

Behavior ​

Positioning ​

Place a quote so that it relates to the surrounding content.

Alignment ​

Quote occupies the whole width of the container or page it is placed in. Text in quotes is always center aligned.

Accessibility guidelines ​

Design considerations ​

  • When changing the background color of a quote, make sure there is enough contrast with the text.
  • Do not use quotes as decoration elements only as it might result confusing for screen readers users.