Blockquote - Overview
Purpose
The Blockquote component is used to style and present quoted text in a visually distinct and consistent manner.
Anatomy
The Blockquote component can be broken down into the following elements -
-
Quotation
The stylised content area for a quotation. -
Citation (optional)
Attribute the author or add in a link to the source. -
Logo (optional)
Image to visualise the source. -
Rating (optional)
A star rating from one to five can be included.
Variants & States
- Appearance: Default, Light
- Citation: on/off
- Logo: on/off
- Star Rating: on/off
Blockquote with every optional element turned on. Source
rating: 4 stars
“This is a quotation”
Blockquote with logo and star rating turned off. Source
“This is a quotation”