Quote
Quotes are used to stylise information and set them apart from plain text.
Breakdown
Quote (Default)
The default block quote uses text only. A combination of lead and paragraph formatting to create hierarchy of information.
Example Rich Text
Quote (Display)
The secondary block quote is used when there is less plain text to show and requires an image to support the quote itself. The image can be hidden when there is no need for it.
Example Text
Usage
A default quote is used to side alongside standard paragraph text to highlight a supporting quote from a user.
A display quote is used sparingly to showcase a quote of relevance to the user. It can be used with or without a supporting image. This image should if possible be of the author of the quote.
Anatomy
Vertical padding
Vertical padding is the empty space between an elements top or bottom edges. Block quotes have a vertical padding of 36px.
Horizontal padding
Horizontal padding is the empty space between an elements left or right edges. Block quotes have a horizontal padding of 36px.
Quote marks
Quote marks overhang the block quote component and have a height of 54px.
