Quote
The quote component has two variations, a pull quote and a block quote. They offer ways to highlight a quote, citation or passage within a page layout.
When to use
- To display a quotation from a person
- To display a citation from an outside source
- To highlight a passage of the current document
When not to use
- Limit use of multiple quotes on a single page
- In the left rail of a page layout
Anatomy
- Right border: each variation of quote has a right border
- Content: quote, citation or passage depending on the variation of quote being used
- Quote author: option to include a quote other in either variation
Demos & variations
Pull quotes
Pull quotes are short excerpts from the presented text. They are used to pull a text passage out of the reader’s flow and give it a more dominant position in the post or the article.
- Are always placed on the right side of the content in a partial column
- Highlight content from the body copy on the page
- Are hidden from screen readers as decorative
- Can be hidden in mobile views
- Should not be placed in the left rail
Pull quote using a footnote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra magna et ligula ultricies, vitae euismod ipsum luctus. Vestibulum congue vitae neque sagittis ornare. Phasellus et orci et sem consectetur faucibus. Suspendisse potenti. Donec aliquet mauris purus, et ultrices nulla posuere vitae. Ut aliquam efficitur dictum. Sed in felis vitae nulla sodales ornare nec ut ante. Etiam vel nunc sapien. Maecenas cursus sem sed eros condimentum pretium. Quisque egestas justo ac magna ultrices tincidunt. Donec felis purus, scelerisque vitae nibh et, cursus fringilla mauris. Duis nec pharetra lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.2
Block quotes
Block quotes are also set off from the main text as a distinct paragraph or block. However, they refer to some external citation which isn’t already mentioned in the article. Block quotations are usually placed within the reader’s flow.
- Are presented in the same font size as the body copy on the page
- Keep the copy in the content layer and will auto-populate at text size
- Should include citations with a numbered footnote or include the name of the person quoted
- Do not repeat body copy that’s within the article
- Will be ready by screen readers inline with page content
- Are presented in full width inside the article
- Should not be placed in the left rail