Testimonial Card
Testimonial card with avatar, name, role, 5-star row and a soft shadow. Production-grade pattern for landing pages and case-study walls.
Testimonial Card the 8th of 19 designs in the 19 CSS Blockquote Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<figure class="cbq-stamp">
<div class="cbq-stamp-stars" aria-label="Rated 5 out of 5">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<blockquote>
<p>"The component library I wished existed for years. Just works."</p>
</blockquote>
<figcaption>
<span class="cbq-stamp-avatar" aria-hidden="true">JR</span>
<span class="cbq-stamp-id">
<strong>Jordan Rivera</strong>
<em>Senior Engineer · Stripe</em>
</span>
</figcaption>
</figure> .cbq-stamp {
max-width: 320px;
padding: 22px;
background: #18181f;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(124, 108, 255, 0.08);
font-family: system-ui, sans-serif;
color: #f0eeff;
}
.cbq-stamp-stars {
display: flex;
gap: 2px;
margin-bottom: 12px;
color: #f5a84a;
font-size: 14px;
}
.cbq-stamp blockquote {
margin: 0 0 16px;
}
.cbq-stamp p {
margin: 0;
font-size: 14px;
line-height: 1.5;
}
.cbq-stamp figcaption {
display: flex;
align-items: center;
gap: 12px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cbq-stamp-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #7c6cff, #a78bfa);
font-weight: 700;
font-size: 13px;
color: #fff;
flex-shrink: 0;
}
.cbq-stamp-id {
display: flex;
flex-direction: column;
gap: 2px;
}
.cbq-stamp-id strong {
font-size: 13px;
font-weight: 600;
color: #f0eeff;
}
.cbq-stamp-id em {
font-size: 11px;
color: #b8b6d4;
font-style: normal;
}