Social proof
Three testimonial cards
Three quote cards in a row, each with the quote, a name line and a role line.
When to use it
Drop this below the features section once you have real quotes to put in it. The card is deliberately built from a blockquote plus two short lines rather than an avatar-and-name layout, because a missing avatar is the most common reason a testimonial row looks broken after import — a local image path cannot become a Media Library attachment, so it arrives as an empty slot. Text-only cards import complete on the first try.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 1 — the section
- Heading × 1 — the section H2
- Container (grid, 3 columns) × 1
- Container × 3 — one per card
- Text Editor × 3 — the quotes
- Text Editor × 3 — the attribution lines
Things worth knowing
- The placeholder text is intentionally generic. Replace every quote with something a real customer actually said — an invented testimonial is a legal problem, not a design choice.
- Do not add review schema to this section. Google does not allow a site to mark up reviews about itself, and doing it can cost you rich results elsewhere on the site.
- If you want avatars, upload the images to the Media Library first and reference those URLs; local paths and Base64 images arrive as empty placeholders.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Three testimonial cards</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f6f8fb;color:#14233a}
.wrap{max-width:1120px;margin:0 auto;padding:72px 22px}
h2{text-align:center;font-size:34px;letter-spacing:-.03em;margin:0 0 38px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid #e4eaf2;border-radius:16px;padding:30px;box-shadow:0 12px 30px rgba(18,35,57,.05)}
.quote{margin:0 0 20px;font-size:15.5px;line-height:1.85;color:#33475f}
.who{margin:0;font-size:14px;font-weight:700;color:#14233a}
.role{margin:4px 0 0;font-size:13px;color:#7c8ba0}
@media(max-width:820px){.grid{grid-template-columns:1fr}h2{font-size:27px}}
</style>
</head>
<body>
<section class="wrap">
<h2>What people say</h2>
<div class="grid">
<article class="card">
<p class="quote">Replace this paragraph with a real quote from a real customer. Keep it to two or three sentences and leave the specifics in — vague praise reads as filler.</p>
<p class="who">Customer name</p>
<p class="role">Role, Company</p>
</article>
<article class="card">
<p class="quote">Replace this paragraph with a real quote from a real customer. A sentence about the problem before, and one about the result after, does more work than an adjective.</p>
<p class="who">Customer name</p>
<p class="role">Role, Company</p>
</article>
<article class="card">
<p class="quote">Replace this paragraph with a real quote from a real customer. If you only have one genuine quote, use one card and delete the other two.</p>
<p class="who">Customer name</p>
<p class="role">Role, Company</p>
</article>
</div>
</section>
</body>
</html>