Testimonial

A customer's words in quotation marks, with a face and a name underneath.

.testimonialCSS only

Examples

We replaced three component libraries with one stylesheet. The product finally looks like one product.

Mika Kim Design lead, Harbor

The calmest interface we have shipped.

Jun Rao CTO, Atlas

Setup took an afternoon.

Ada Northlight

Our docs read better than our app now.

Jun Atlas

`figure.testimonial`	Stacks the quote over the caption. Works on its own or as `.card.testimonial` in a grid.
`> blockquote`	The quote, a step larger and in full text colour. Curly quotation marks are added; don't type them.
`> figcaption`	Who said it: an optional `.avatar`, then a `<span>` with the name in `<b>` and the role after it.

Attribute	Values	Description
`data-size`	`l`	A display-size quote, for a single testimonial between page sections.
`data-center`	boolean	Centres the quote and caption.

<figure> with a <figcaption> ties the quote to its author for screen readers.
The quotation marks are generated content; most screen readers do not read them, which is what you want.
If you cite a source, put the link in the caption, or in a cite attribute on the <blockquote>.