Testimonial List Template

Build trust and social proof by showcasing customer feedback with this clean testimonial list.

This component uses a card-based design to present each testimonial clearly, complete with the author's photo and title.

Screenshot of a card-based list of customer testimonials.

Get Source Code Preview

About this Template

This template's foundation is a semantic unordered list. Each list item contains a complete testimonial, making the structure logical and accessible. The design features a decorative quotation mark on each card and uses Flexbox to align the author's profile picture and details. All CSS is self-contained and easily customizable.

Features

List-Based Foundation: Built on a semantic ul element for proper document structure and accessibility.
Accessible Quotations: Uses the blockquote and figcaption elements correctly to associate the quote with its author.
Self-Contained Styles: All styles are scoped within the .testimonial-list-template class to ensure no conflicts with your existing website.
Easy to Customize: CSS custom properties make it simple to adjust colors, fonts, and spacing.
Placeholder Images: Uses an external placeholder service to demonstrate the placement of an image, and to make it easy for you to replace with your own image.

Code Breakdown

The entire component is structured as a ul with the class .testimonial-list. Each li with the class .testimonial-card represents a single testimonial.

Inside each list item, a figure element wraps the testimonial. The quote itself is placed within a blockquote, and the author's information is placed in a figcaption. This is the semantically correct way to mark up this type of content. A large, decorative quote mark is added using the ::before pseudo-element on the .testimonial-card, which is positioned behind the text for a professional look.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testimonial List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Testimonial List Component Styles - Copy from here
           ========================================================================== */
        .testimonial-list-template {
            --testimonial-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --card-bg-color: #ffffff;
            --primary-text-color: #212529;
            --secondary-text-color: #6c757d;
            --quote-icon-color: #e9ecef;
            --card-border-color: #dee2e6;
            --card-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);

font-family: var(--testimonial-font-family);
            color: var(--primary-text-color);
            width: 100%;
            max-width: 800px;
        }

.testimonial-list-template *,
        .testimonial-list-template *::before,
        .testimonial-list-template *::after {
            box-sizing: border-box;
        }

.testimonial-list-template .testimonial-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .testimonial-list-template .testimonial-header h2 {
            font-size: 2.25rem;
            margin: 0 0 0.5rem 0;
        }

.testimonial-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 2rem;
        }

.testimonial-card {
            background-color: var(--card-bg-color);
            border: 1px solid var(--card-border-color);
            border-radius: .5rem;
            padding: 2rem;
            box-shadow: var(--card-shadow);
            position: relative; /* For the quote icon */
            overflow: hidden; /* Contains the quote icon */
        }
        
        /* Decorative Quote Icon */
        .testimonial-card::before {
            content: '\201C'; /* Left double quotation mark */
            position: absolute;
            top: -10px;
            left: 10px;
            font-size: 8rem;
            color: var(--quote-icon-color);
            font-weight: bold;
            line-height: 1;
            z-index: 1;
        }

.testimonial-card figure {
            margin: 0;
            position: relative;
            z-index: 2; /* Sits on top of the quote icon */
        }

.testimonial-card blockquote {
            margin: 0 0 1.5rem 0;
            font-size: 1.1rem;
            line-height: 1.6;
            font-style: italic;
            color: var(--secondary-text-color);
        }

.testimonial-card figcaption {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .testimonial-card .author-image {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

.testimonial-card .author-details {
            line-height: 1.3;
        }

.testimonial-card .author-name {
            font-weight: 600;
            color: var(--primary-text-color);
        }

.testimonial-card .author-title {
            font-size: .875rem;
            color: var(--secondary-text-color);
        }

</style>
</head>
<body>

<div class="testimonial-list-template">
    <header class="testimonial-header">
        <h2>Words From Our Pilots</h2>
    </header>

<ul class="testimonial-list">
        <li class="testimonial-card">
            <figure>
                <blockquote cite="#captain-aria">
                    This platform revolutionized our interstellar logistics. The flux navigation charts are incredibly intuitive and our delivery times have been cut by twelve parsecs. Simply stellar.
                </blockquote>
                <figcaption>
                    <img src="https://placehold.co/50x50/3b82f6/ffffff" alt="Photo of Captain Aria Vance." class="author-image">
                    <div class="author-details" id="captain-aria">
                        <div class="author-name">Captain Aria Vance</div>
                        <div class="author-title">Starship Commander, Hyperion Freight</div>
                    </div>
                </figcaption>
            </figure>
        </li>
        
        <li class="testimonial-card">
            <figure>
                <blockquote cite="#dr-kaelen">
                    As a xenobotanist, cataloging flora across galaxies was a chore. The auto-taxonomy feature not only identified species but also suggested optimal soil alkalinity. My research is lightyears ahead!
                </blockquote>
                <figcaption>
                    <img src="https://placehold.co/50x50/10b981/ffffff" alt="Photo of Dr. Kaelen Reyes." class="author-image">
                    <div class="author-details" id="dr-kaelen">
                        <div class="author-name">Dr. Kaelen Reyes</div>
                        <div class="author-title">Chief Xenobotanist, Ganymede Labs</div>
                    </div>
                </figcaption>
            </figure>
        </li>
    </ul>
</div>

</body>
</html>

View Output