Quote
A Quote denotes a quotation or excerpt from another source, distinctively styled to stand out from the main content.
Usage
- Use a Quote to draw attention to a piece of content from a speaker or excerpt.
- The most effective placement for a Quote is between paragraphs, rather than at random locations on a page.
Appearance
A. Quote icon
The icon is more for aesthetics and can provide clarity to make the content more engaging.
B. Quote
Contains the main content being quoted and carries the main message.
C. Quotee
Indicates the person or entity from which the quote originates.
D. Quotee function
Provides additional information about the quotee. It could contain a profession, their role in a specific context or the title of the work the quote is from.
Configuration: quote icon
1. With quote icon
2. Without quote icon
Quotation marks
Our react-component adds and styles the quotation marks automatically. The styling is specified by the lang attribute in html. For example: 'fr' adds «angle quotes» (guillemets) instead of the common “double quotes”.
Avatar
It’s possible to display the image of the quotee.
Do's & Dont's
Don’t use mile long quotes.
Limit the number of quotes used on a page.
Don’t include quotation marks in your copy, they will be added for you.