Social proof
Review cards with star ratings
Three review cards in a row, each with a star rating, the review text, a reviewer name and where the review was left.
When to use it
TODO
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- pending
Things worth knowing
- TODO
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>Review cards with star ratings</title>
<style>
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#14233a;background:#f6f8fb}
.reviews{max-width:1160px;margin:0 auto;padding:76px 24px}
.head{text-align:center;max-width:660px;margin:0 auto 40px}
h2{margin:0 0 12px;font-size:36px;line-height:1.14;letter-spacing:-.03em}
.intro{margin:0;color:#5b6b82;font-size:16px;line-height:1.8}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{padding:28px;border:1px solid #e3e9f1;border-radius:14px;background:#fff}
.stars{display:flex;gap:3px;margin:0 0 16px;color:#ff5b35;font-size:19px;line-height:1}
.text{margin:0 0 20px;color:#33475f;font-size:15px;line-height:1.8}
.name{margin:0;font-size:14.5px;font-weight:700;color:#14233a}
.source{margin:4px 0 0;font-size:13px;color:#7c8ba0}
@media(max-width:780px){.reviews{padding:54px 20px}h2{font-size:28px}.head{margin-bottom:30px}.grid{grid-template-columns:1fr;gap:14px}.card{padding:24px}}
</style>
</head>
<body>
<section class="reviews">
<div class="head">
<h2>What customers rated us</h2>
<p class="intro">Copy each review word for word from where the customer left it, keep the star rating they gave, and say where it came from.</p>
</div>
<div class="grid">
<article class="card">
<div class="stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<p class="text">Replace with a real review. The useful ones name the job and one detail the customer noticed, such as arriving in the window they were given.</p>
<p class="name">Customer first name and initial</p>
<p class="source">Where the review was left, and the month</p>
</article>
<article class="card">
<div class="stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<p class="text">Replace with a real review. Two or three sentences is plenty; cut the greeting and the sign-off, never the specifics.</p>
<p class="name">Customer first name and initial</p>
<p class="source">Where the review was left, and the month</p>
</article>
<article class="card">
<div class="stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>☆</span></div>
<p class="text">Replace with a real review. A four-star review with a fair comment reads as more credible than a row of perfect scores.</p>
<p class="name">Customer first name and initial</p>
<p class="source">Where the review was left, and the month</p>
</article>
</div>
</section>
</body>
</html>