Quote/Testimonial Card

Build trust and credibility by showcasing customer feedback in this elegantly designed testimonial card template.

This layout is essential for any marketing or product page to provide social proof and let satisfied customers sell for you.

Screenshot of three quote and testimonial cards in a responsive grid.

Get Source Code Preview

About this Component

A well-presented testimonial can be a powerful conversion tool. This component frames a customer's quote in a clean, professional manner, complete with their name, role, and avatar. The use of semantic HTML makes the content clear not only to browsers but also to search engines and accessibility devices.

Features

Semantic HTML: Uses the figure, blockquote, and figcaption tags, which are the correct semantic elements for marking up a quotation and its source.
Flexible Layout: Built with a combination of CSS Grid for the overall container and Flexbox for the internal card layout.
Responsive Design: The cards and the grid they sit in adapt gracefully to any screen size.
Equal Height Cards: Flexbox properties ensure that cards in the same row will stretch to an equal height, creating a tidy, uniform look.

Code Breakdown

HTML Structure

The entire card is wrapped in a figure element, which is the standard for self-contained content like a quote. A decorative svg quote icon is placed at the top for visual effect and marked with aria-hidden="true" to be ignored by screen readers. The quote itself is placed inside a blockquote element. Finally, all the attribution details (avatar, name, role) are wrapped in a figcaption element, which semantically links that information to the main quote.

CSS Styling

The card container (.cards-grid-container) uses CSS Grid to handle the responsive column layout. Each card (.qt-card) is styled with display: flex and flex-direction: column. This flexible structure is what enables the cards to maintain an equal height within a row. By setting flex-grow: 1 on the blockquote element, we force it to expand and take up any available vertical space, which pushes the figcaption neatly to the bottom of the card.

Code

Here's the complete, self-contained code. The example shows three cards, and you can easily copy and paste the figure block to add more testimonials.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f9fafb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* === Grid Container for the Cards === */
.cards-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

/* === Testimonial Card Styles === */
.qt-card {
    --qt-card-padding: 2rem;
    --qt-card-bg: #ffffff;
    --qt-card-radius: 12px;
    --qt-card-shadow: 0 4px 10px rgba(0,0,0,0.05);

background-color: var(--qt-card-bg);
    border-radius: var(--qt-card-radius);
    padding: var(--qt-card-padding);
    box-shadow: var(--qt-card-shadow);
    display: flex;
    flex-direction: column;
}

.qt-card .qt-icon-quote {
    width: 36px;
    height: 36px;
    color: #e5e7eb; /* A light, subtle gray */
    margin-bottom: 1rem;
}

.qt-card .qt-blockquote {
    flex-grow: 1; /* Allows the quote to take up available space */
    margin: 0;
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.6;
    color: #4b5563; /* A muted gray */
}

.qt-card .qt-blockquote p {
    margin: 0;
}

.qt-card .qt-figcaption {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f3f4f6; /* A very light divider line */
    display: flex;
    align-items: center;
    gap: 1rem;
}

.qt-card .qt-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0; /* Prevents avatar from shrinking */
}

.qt-card .qt-author-details {
    line-height: 1.4;
}

.qt-card .qt-author-name {
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.qt-card .qt-author-role {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
}
</style>

<div class="cards-grid-container">

<figure class="qt-card">
        <svg class="qt-icon-quote" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true"><path d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V216z"/></svg>
        <blockquote class="qt-blockquote">
            <p>Working with this team was an absolute pleasure. Their attention to detail and commitment to quality is unparalleled. I couldn't be happier with the final product.</p>
        </blockquote>
        <figcaption class="qt-figcaption">
            
            <img class="qt-avatar" src="https://placehold.co/96x96/666/fff/png?text=AZ" alt="Avatar of Adelaide Vance.">
            <div class="qt-author-details">
                <p class="qt-author-name">Adelaide Vance</p>
                <p class="qt-author-role">CEO, Quantum Innovations</p>
            </div>
        </figcaption>
    </figure>

<figure class="qt-card">
        <svg class="qt-icon-quote" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true"><path d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V216z"/></svg>
        <blockquote class="qt-blockquote">
            <p>These code templates are a game-changer. They saved me countless hours of development time and the results are incredibly polished and professional.</p>
        </blockquote>
        <figcaption class="qt-figcaption">
            
            <img class="qt-avatar" src="https://placehold.co/96x96/333/fff/png?text=BX" alt="Avatar of Barnaby Wexler.">
            <div class="qt-author-details">
                <p class="qt-author-name">Barnaby Wexler</p>
                <p class="qt-author-role">Lead Developer, Starlight Solutions</p>
            </div>
        </figcaption>
    </figure>

<figure class="qt-card">
        <svg class="qt-icon-quote" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true"><path d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V216z"/></svg>
        <blockquote class="qt-blockquote">
            <p>Support went above and beyond to help us integrate the new designs. I would highly recommend their services to anyone.</p>
        </blockquote>
        <figcaption class="qt-figcaption">
            
            <img class="qt-avatar" src="https://placehold.co/96x96/999/fff/png?text=CR" alt="Avatar of Caspian Rowe.">
            <div class="qt-author-details">
                <p class="qt-author-name">Caspian Rowe</p>
                <p class="qt-author-role">Project Manager, Apex Digital</p>
            </div>
        </figcaption>
    </figure>

</div>

View Output