The React documentation for this component can be read from Storybook (link here)

Quote

Use to cite words said by a person or organisation.

Description

Can include a citation (i.e. the quote's author), but this is optional. There are three class modifiers that can be used. And one further modifier which is set by the page language.

Class Modifiers

quote--trustpilot-author: For when the quote is sourced from TrustPilot. Makes the author text green. quote--large: Larger, bold font. quote--shrink: On smaller screens, the text gets smaller and switches to the default font.

Locale modifier

If the page language is set to de, different quote marks are used due to the way the German language works. When this component is used, it is assumed the correct lang attribute is set on the page. To observe the difference, use the below select box to switch the lang attribute on the html tag and see the examples change.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-quote;

Usage

Usage example

Default

Great service, and so easy. Such a clever, simple and quick process. Would highly recommend over bank loans.
Sam, April 2016

Trustpilot author

Great service, and so easy. Such a clever, simple and quick process. Would highly recommend over bank loans.
Sam, April 2016

Large variant

Great service, and so easy. Such a clever, simple and quick process. Would highly recommend over bank loans.
Sam, April 2016

Shrink variant

Great service, and so easy. Such a clever, simple and quick process. Would highly recommend over bank loans.
Sam, April 2016 
<section class="quote">
  <blockquote class="quote__content">Great service, and so easy. Such a clever, simple and quick process. Would highly recommend over bank loans.</blockquote>
  <cite class="quote__author">Sam, April 2016</cite>
</section>

<section class="quote quote--trustpilot-author">
  <blockquote class="quote__content">Great service, and so easy. Such a clever, simple and quick process. Would highly recommend over bank loans.</blockquote>
  <cite class="quote__author">Sam, April 2016</cite>
</section>

<section class="quote quote--large">
  <blockquote class="quote__content">Great service, and so easy. Such a clever, simple and quick process. Would highly recommend over bank loans.</blockquote>
  <cite class="quote__author">Sam, April 2016</cite>
</section>

<section class="quote quote--shrink">
  <blockquote class="quote__content">Great service, and so easy. Such a clever, simple and quick process. Would highly recommend over bank loans.</blockquote>
  <cite class="quote__author">Sam, April 2016</cite>
</section>