Overview
Testimonials are a great way of providing social proof by showing a customer's positive sentiment in relation to a product and service. It consists of a quote and a profile. The profile includes the customer's image, name, title and a link to further information. The component comes in large and small variations.
Examples
Small variation
"Jerry, just remember, it's not a lie if you believe it."
<section class="testimonial testimonial--sm">
<blockquote class="testimonial__quote">"Jerry, just remember, it's not a lie if you believe it."</blockquote>
<div class="profile">
<img src="http://placehold.it/60x60" alt="Profile Image" class="profile__image circle"/>
<h5 class="mt-1 mb-0">
George Costanza
<span class="profile__profession">Sitcom Writer</span>
</h5>
<a href="" class="link-advanced">Optional call to action</a>
</div>
</section>
Large variation
"Jerry, just remember, it's not a lie if you believe it."
<section class="testimonial testimonial--lg">
<blockquote class="testimonial__quote">"Jerry, just remember, it's not a lie if you believe it."</blockquote>
<div class="profile">
<img src="http://placehold.it/60x60" alt="Profile Image" class="profile__image circle"/>
<h5 class="mt-1 mb-0">
George Costanza
<span class="profile__profession">Sitcom Writer</span>
</h5>
<a href="" class="link-advanced">Optional call to action</a>
</div>
</section>
Usage guidelines
| Dos | Donts |
|---|---|
 Do use real quotes.
|
 Don't over use it. Limit to a maximum of 3 on a page.
|
|
For added authenticity, do use the person's name, title and image where possible.
|
Don't use too high up on a page. It should act as an extra proof point after features and benefits.
|
Implementation guidelines
| Name | Class | Description |
|---|---|---|
| Size |
.testimonial--sm
.testimonial--lg
|
Sizes for Testimonials. Default is large. |