Quote Testimonial Card

<!DOCTYPE html>
<title>My Example</title>

<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>