Morningstar Design

Quotes are made up of two blocks: Block 1 with the quote copy, and block 2 with the author information. There could be a carousel of quotes, in this case the navigations controls will be left aligned under block 2, and advances to the next quote.

Shows the anatomy of the quote component

Starting quote slot sets the beginning of the quote.
Quote copy defines the quote. It has a character limit.
Headshot slot defines where a headshot of the quote author should be placed.
Attribution copy defines the role and company of the quote’s author.

When to Use

Use a quote section to highlight an important message or phrase related to the page content.

When Not to Use

Don’t use the quote section to display recent news or an event. Use the news section instead.


Variation	Purpose	Quote	Attribution Copy	Headshot	Background
Blog quote	Use to highlight an opinion, phrase, comment, or testimonial from someone on any page.	With quote	With author’s name and company; with author’s name, role and company.	With author’s headshot, no author’s headshot	With background (solid color)
Single Quote	Use to highlight a phrase or comment from someone on its own blog.	With quote	No attribution copy	No author’s headshot	With background (solid color)

Spacing

Ensure that proper space is given between each item in the container. Besides the horizontal padding and gutter, the carousel has a top and a bottom margin to consider. Note that the vertical spacing between multiple elements will take the gutter height of the grid (behavior per viewport).

Spacing around elements within the compact quote component — Compact

Hierarchy

A proper hierarchy must be ensured for the elements that compose a quote. The author information (headshot and attribution) should be at the bottom of the quote copy. The initial quotation mark should be outside the quote copy, using the same text style as the whole quote text and final quotation mark.

Alignment

Components within the quote container should be left-aligned. Keep in mind that the headshot is aligned to the left with the beginning of the quote copy (not the initial quotation mark), and that the headshot and attribution are horizontally center-aligned between them.