Open Menu
Close Menu
Edit

Blockquotes

For all blockquote options and API docs, see the blockquote reference in Pattern Lab.

The blockquote component is used to showcase customer testimonials, or to dramatically call out a specific section of text within an article. In addition to the quote, you can add an optional attribution or logo, and include an image of the quoted individual.

All quote components can accept any of the color themes: xdark, dark, light and xlight. You can customize content alignment (left/centered/right), add borders, and set the width of the quote to full bleed if so desired.

Best Practices

Employ quotes strategically.

The best location for quotes is in page heroes, or as an accent band in the middle of a page. Avoid using more than 1-2 quotes within a layout, to maximize the power of the customer's words.

Examples

Use the following examples as a guide for using quotes throughout your layouts.

In hero areas

Customer quotes can make a dramatic statement in a lockup band.
Use a quote alongside a marketing headline to amplify the message.

In page interiors

Add a quote in the middle of the page to support your main message.