Testimonial Card

This example shows how to create and capture testimonial cards for social proof, marketing materials, or website content.

HTML Content

<div class="testimonial-card">
    <div class="quote-icon">❝</div>
    <div class="content">
        <p class="quote">
            HTML to Image has transformed our workflow. We can now automatically 
            generate social media images at scale, saving hours of manual work 
            each week. The API is reliable and the support is excellent!
        </p>
        <div class="author">
            <img 
                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" 
                alt="John Doe"
                class="avatar"
            />
            <div class="author-info">
                <div class="name">John Doe</div>
                <div class="title">CTO at TechCorp</div>
            </div>
        </div>
        <div class="rating">
            <span class="star">★</span>
            <span class="star">★</span>
            <span class="star">★</span>
            <span class="star">★</span>
            <span class="star">★</span>
        </div>
    </div>
</div>

CSS Styles

body {
    margin: 0;
    padding: 24px;
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.testimonial-card {
    width: 400px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 32px;
    position: relative;
}

.quote-icon {
    position: absolute;
    top: -10px;
    left: 24px;
    font-size: 80px;
    color: #3b82f6;
    opacity: 0.1;
    font-family: Georgia, serif;
}

.content {
    position: relative;
}

.quote {
    color: #1f2937;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 24px;
}

.author {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 16px;
    object-fit: cover;
}

.author-info {
    flex-grow: 1;
}

.name {
    color: #111827;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}

.title {
    color: #6b7280;
    font-size: 14px;
}

.rating {
    color: #fbbf24;
    font-size: 20px;
    letter-spacing: 2px;
}

.star {
    display: inline-block;
}

API Request

POST https://app.html2img.com/api/html

{
    "html": "<div class=\"testimonial-card\"><div class=\"quote-icon\">❝</div><div class=\"content\"><p class=\"quote\">HTML to Image has transformed our workflow. We can now automatically generate social media images at scale, saving hours of manual work each week. The API is reliable and the support is excellent!</p><div class=\"author\"><img src=\"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e\" alt=\"John Doe\" class=\"avatar\" /><div class=\"author-info\"><div class=\"name\">John Doe</div><div class=\"title\">CTO at TechCorp</div></div></div><div class=\"rating\"><span class=\"star\">★</span><span class=\"star\">★</span><span class=\"star\">★</span><span class=\"star\">★</span><span class=\"star\">★</span></div></div></div>",
    "width": 490,
    "height": 320,
    "css": "body{margin:0;padding:10px;background:white;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif}.testimonial-card{width:400px;background:white;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,0.08);padding:32px;position:relative}.quote-icon{position:absolute;top:-10px;left:24px;font-size:80px;color:#3b82f6;opacity:0.1;font-family:Georgia,serif}.content{position:relative}.quote{color:#1f2937;font-size:16px;line-height:1.6;margin:0 0 24px}.author{display:flex;align-items:center;margin-bottom:16px}.avatar{width:48px;height:48px;border-radius:50%;margin-right:16px;object-fit:cover}.author-info{flex-grow:1}.name{color:#111827;font-weight:600;font-size:16px;margin-bottom:4px}.title{color:#6b7280;font-size:14px}.rating{color:#fbbf24;font-size:20px;letter-spacing:2px}.star{display:inline-block}"
}

How it Works

1. Modern card design with subtle shadow and rounded corners
2. Professional typography with proper line height and spacing
3. Circular avatar image with object-fit for proper scaling
4. Star rating system using Unicode stars
5. Decorative quote mark for visual interest