Client Testimonial Card

Showcase customer feedback with this high-impact testimonial card designed to build trust and social proof.

This layout is designed to break up the standard flow of a page, making it an excellent standalone component for landing pages, case study introductions, or homepages.

Screenshot of a client testimonial card with a large quote icon.

Get Source Code Preview

About this Component

This testimonial card uses a distinctive design where the main quote is contained within its own "box". The client's attribution (avatar, name, and title) is placed outside and below this box, making a clear visual distinction between the quote and its source. A large, decorative quote icon sits on top of the box, breaking the rectangular shape and adding visual interest.

Features

High-Impact Design: The separate quote box and overlapping icon make the testimonial stand out from other content.
Clear Attribution: The author of the quote is presented clearly below the main text, with their photo, name, and professional title.
Semantic Structure: The component correctly uses a figure, blockquote, and figcaption element for a well-structured and accessible format.

Code Breakdown

HTML Structure

The entire component is a semantic figure. Inside, the blockquote element serves as the main white box for the quote text. Its first child is a div that contains the decorative SVG quote icon. Following the blockquote is the figcaption element, which contains the author's image and details.

CSS Styling

The layout is achieved with CSS positioning. The parent card (.testimonial-card) and the quote box (.testimonial-quote-box) are both given position: relative. This allows the decorative quote icon (.testimonial-quote-icon) to be positioned absolutely. By using a negative top value (e.g., top: -20px), the icon is pulled upwards, causing it to overlap the top edge of its container for a dynamic, layered look.

Code

Here's the complete, self-contained code.

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

/* Optional: a container to center the card on the page for demonstration */
.demo-container-testimonial {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* === Client Testimonial Card Styles === */
.testimonial-card {
    --testimonial-radius: 12px;
    --testimonial-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    
    position: relative;
    max-width: 600px;
    width: 100%;
    background-color: #ffffff;
    border-radius: var(--testimonial-radius);
    box-shadow: var(--testimonial-shadow);
    padding: 3rem 2rem 2rem;
    margin-top: 32px; /* Make space for the overlapping icon */
}

/* The decorative quote icon */
.testimonial-quote-icon {
    position: absolute;
    top: -24px;
    left: 2rem;
    background-color: #4f46e5;
    color: #ffffff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.testimonial-quote-icon svg {
    width: 28px;
    height: 28px;
}

.testimonial-quote-text {
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.6;
    color: #374151;
    margin: 0;
}

/* Author block, positioned below the quote box */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.testimonial-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-author-details {
    line-height: 1.4;
}
.testimonial-author-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: #111827;
}
.testimonial-author-title {
    color: #6b7280;
    font-size: 0.95rem;
}
</style>

<div class="demo-container-testimonial">
    <figure class="testimonial-card">
        <div class="testimonial-quote-icon">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M7 7v7h-7v-7.1c0-4.8 4.5-5.4 4.5-5.4l0.6 1.4c0 0-2 0.3-2.4 1.9-0.4 1.2 0.4 2.2 0.4 2.2h3.9z"></path> <path d="M16 7v7h-7v-7.1c0-4.8 4.5-5.4 4.5-5.4l0.6 1.4c0 0-2 0.3-2.4 1.9-0.4 1.2 0.4 2.2 0.4 2.2h3.9z"></path></svg>
        </div>
        <blockquote class="testimonial-quote-text">
            The platform transformed the way our team works. The increase in productivity was noticeable from day one. I cannot recommend this highly enough to anyone in the industry.
        </blockquote>
        <figcaption class="testimonial-author">
            <img class="testimonial-author-avatar" src="https://placehold.co/112x112/38bdf8/ffffff/png?text=Z" alt="Avatar of Zoya Khan.">
            <div class="testimonial-author-details">
                <div class="testimonial-author-name">Zoya Khan</div>
                <div class="testimonial-author-title">Director of Operations, FutureCorp</div>
            </div>
        </figcaption>
    </figure>
</div>

View Output