Testimonial Cards

Quotes, attribution and ratings in a paired-card layout. All text below is sample content.

Open demo ↗

“This sample quote shows how a longer customer story fits into the card.”

Alex Jordan Sample customer · Example company

★★★★★

“Use this space for an approved testimonial and a clear attribution.”

Morgan Riley Sample customer · Example company

★★★★★

HTML source & reuse instructions

Include the shared CSS and JavaScript files. Rename copied IDs and their matching references.


<div class="lab-grid two">
<figure class="cp-review">
<div aria-hidden="true" class="cp-avatar">
         AJ
        </div>
<blockquote>
         “This sample quote shows how a longer customer story fits into the card.”
        </blockquote>
<figcaption>
<strong>
          Alex Jordan
         </strong>
<span>
          Sample customer · Example company
         </span>
</figcaption>
<div aria-label="5 out of 5 stars" class="cp-stars">
         ★★★★★
        </div>
</figure>
<figure class="cp-review">
<div aria-hidden="true" class="cp-avatar">
         MR
        </div>
<blockquote>
         “Use this space for an approved testimonial and a clear attribution.”
        </blockquote>
<figcaption>
<strong>
          Morgan Riley
         </strong>
<span>
          Sample customer · Example company
         </span>
</figcaption>
<div aria-label="5 out of 5 stars" class="cp-stars">
         ★★★★★
        </div>
</figure>
</div>