UI Components Easy
Insurance — Customer Stories
A reassuring testimonials section with rated customer-story cards showing policy type, star rating, a quote and a claim-handled stat, plus a trust band of confident metrics for claims paid, average payout time and customers covered, with a filterable rating control.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--blue: #2563eb;
--blue-d: #1d4ed8;
--blue-50: #eef4ff;
--green: #15a06b;
--green-50: #e6f6ef;
--ink: #0f1a2b;
--muted: #5a6b82;
--bg: #f3f7fc;
--white: #ffffff;
--line: #e2eaf4;
--star: #f5a623;
--radius: 18px;
--shadow: 0 1px 2px rgba(15, 26, 43, .04), 0 10px 30px rgba(37, 99, 235, .07);
--font: 'Inter', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--ink);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
padding: 40px 20px;
}
.wrap { max-width: 1040px; margin: 0 auto; }
/* Header */
.head { text-align: center; max-width: 620px; margin: 0 auto 30px; }
.eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--blue);
background: var(--blue-50);
padding: 6px 12px;
border-radius: 999px;
margin-bottom: 14px;
}
.head h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -.02em; }
.lede { color: var(--muted); font-size: 16px; margin-top: 10px; }
/* Trust band */
.trust {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
margin-bottom: 34px;
}
.trust-item {
background: var(--white);
padding: 24px 18px;
text-align: center;
}
.trust-num {
display: block;
font-size: clamp(24px, 3vw, 32px);
font-weight: 800;
letter-spacing: -.02em;
color: var(--blue-d);
}
.trust-item:nth-child(2) .trust-num,
.trust-item:nth-child(4) .trust-num { color: var(--green); }
.trust-label {
display: block;
font-size: 13px;
color: var(--muted);
margin-top: 6px;
font-weight: 500;
}
/* Filter bar */
.bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 18px;
}
.bar-title { font-size: 20px; font-weight: 700; }
.filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--muted);
background: var(--white);
border: 1px solid var(--line);
border-radius: 999px;
padding: 8px 14px;
cursor: pointer;
transition: all .16s ease;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.is-active {
background: var(--blue);
border-color: var(--blue);
color: var(--white);
}
.chip:focus-visible,
.card:focus-within { outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 2px; }
.count { font-size: 13px; color: var(--muted); margin-left: 4px; }
/* Grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 18px;
}
.card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 1px 2px rgba(15, 26, 43, .05), 0 16px 38px rgba(37, 99, 235, .12);
}
.card.is-hidden { display: none; }
.card-head { display: flex; align-items: center; gap: 12px; }
.avatar {
flex: none;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--blue-50);
color: var(--blue-d);
font-size: 14px;
font-weight: 700;
display: grid;
place-items: center;
}
.who { flex: 1; min-width: 0; }
.who h3 { font-size: 15px; font-weight: 700; }
.policy { display: block; font-size: 12.5px; color: var(--muted); }
.verified {
flex: none;
font-size: 11px;
font-weight: 700;
color: var(--green);
background: var(--green-50);
padding: 4px 8px;
border-radius: 999px;
}
.stars { display: flex; gap: 2px; margin: 14px 0 10px; }
.stars i {
width: 16px; height: 16px;
display: inline-block;
background: var(--star);
-webkit-mask: var(--star-svg) center / contain no-repeat;
mask: var(--star-svg) center / contain no-repeat;
}
.stars i.off { background: #d7e0ec; }
blockquote {
font-size: 14.5px;
color: var(--ink);
margin-bottom: 16px;
flex: 1;
}
.stat {
border-top: 1px solid var(--line);
padding-top: 12px;
font-size: 13px;
color: var(--muted);
}
.stat strong { color: var(--green); font-weight: 700; }
.empty {
text-align: center;
color: var(--muted);
padding: 40px;
font-size: 15px;
}
/* star svg as css var for mask */
:root {
--star-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.8 5.9 20.4l1.4-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E");
}
/* Responsive */
@media (max-width: 760px) {
.trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
body { padding: 24px 14px; }
.trust { grid-template-columns: repeat(2, 1fr); }
.grid { grid-template-columns: 1fr; }
.bar { align-items: flex-start; flex-direction: column; }
}(function () {
'use strict';
/* --- Render star rows from each card's data-rating --- */
document.querySelectorAll('.card').forEach(function (card) {
var rating = parseInt(card.getAttribute('data-rating'), 10) || 0;
var holder = card.querySelector('.stars');
if (!holder) return;
for (var i = 1; i <= 5; i++) {
var star = document.createElement('i');
if (i > rating) star.className = 'off';
holder.appendChild(star);
}
});
/* --- Rating filter --- */
var grid = document.getElementById('grid');
var cards = Array.prototype.slice.call(grid.querySelectorAll('.card'));
var chips = Array.prototype.slice.call(document.querySelectorAll('.chip'));
var countEl = document.getElementById('count');
var emptyEl = document.getElementById('empty');
function applyFilter(filter) {
var visible = 0;
cards.forEach(function (card) {
var rating = parseInt(card.getAttribute('data-rating'), 10) || 0;
var show =
filter === 'all' ||
(filter === '5' && rating === 5) ||
(filter === '4' && rating >= 4);
card.classList.toggle('is-hidden', !show);
if (show) visible++;
});
countEl.textContent = visible + (visible === 1 ? ' story' : ' stories');
emptyEl.hidden = visible !== 0;
}
chips.forEach(function (chip) {
chip.addEventListener('click', function () {
chips.forEach(function (c) {
c.classList.remove('is-active');
c.setAttribute('aria-pressed', 'false');
});
chip.classList.add('is-active');
chip.setAttribute('aria-pressed', 'true');
applyFilter(chip.getAttribute('data-filter'));
});
});
/* --- Count-up animation for the trust band --- */
function formatNum(n, opts) {
if (opts.compact) {
if (n >= 1e9) return '$' + (n / 1e9).toFixed(0) + 'B';
if (n >= 1e6) return (opts.prefix || '') + (n / 1e6).toFixed(0) + 'M';
if (n >= 1e3) return (opts.prefix || '') + (n / 1e3).toFixed(0) + 'K';
}
return (opts.prefix || '') + n.toLocaleString('en-US') + (opts.suffix || '');
}
function runCount(el) {
var target = parseFloat(el.getAttribute('data-count'));
if (isNaN(target)) return;
var opts = {
prefix: el.getAttribute('data-prefix') || '',
suffix: el.getAttribute('data-suffix') || '',
compact: el.getAttribute('data-compact') === 'true'
};
var start = performance.now();
var dur = 1100;
function tick(now) {
var p = Math.min((now - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
el.textContent = formatNum(Math.round(target * eased), opts);
if (p < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
}
var nums = document.querySelectorAll('.trust-num');
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
runCount(entry.target);
io.unobserve(entry.target);
}
});
}, { threshold: 0.4 });
nums.forEach(function (n) { io.observe(n); });
} else {
nums.forEach(runCount);
}
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Customer Stories — Northbeam Insurance</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="wrap">
<header class="head">
<span class="eyebrow">Customer stories</span>
<h1>Cover you can count on when it counts</h1>
<p class="lede">Real Northbeam members on how their claims were handled — fairly, and fast.</p>
</header>
<!-- Trust band -->
<section class="trust" aria-label="Company trust metrics">
<div class="trust-item">
<span class="trust-num" data-count="487000000" data-prefix="$" data-compact="true">$487M</span>
<span class="trust-label">Claims paid in 2025</span>
</div>
<div class="trust-item">
<span class="trust-num" data-count="4" data-suffix=" days">4 days</span>
<span class="trust-label">Avg. payout time</span>
</div>
<div class="trust-item">
<span class="trust-num" data-count="312000" data-compact="true">312K</span>
<span class="trust-label">Customers covered</span>
</div>
<div class="trust-item">
<span class="trust-num" data-count="98" data-suffix="%">98%</span>
<span class="trust-label">Claims approval rate</span>
</div>
</section>
<!-- Filter -->
<section class="bar" aria-label="Filter testimonials">
<h2 class="bar-title">What members say</h2>
<div class="filter" role="group" aria-label="Filter by rating">
<button class="chip is-active" data-filter="all" aria-pressed="true">All</button>
<button class="chip" data-filter="5" aria-pressed="false">5 stars</button>
<button class="chip" data-filter="4" aria-pressed="false">4+ stars</button>
<span class="count" id="count" aria-live="polite">6 stories</span>
</div>
</section>
<!-- Cards -->
<section class="grid" id="grid" aria-label="Customer testimonials">
<article class="card" data-rating="5">
<header class="card-head">
<span class="avatar" aria-hidden="true">MR</span>
<div class="who">
<h3>Marisol Rivera</h3>
<span class="policy">Home & Contents · since 2019</span>
</div>
<span class="verified" title="Verified customer">✓ Verified</span>
</header>
<div class="stars" role="img" aria-label="Rated 5 out of 5"></div>
<blockquote>“A pipe burst over the holidays. I filed at 9pm, an adjuster called the next morning, and the kitchen repair was funded that week. No runaround.”</blockquote>
<footer class="stat"><strong>Claim settled in 3 days</strong> · $14,200 paid</footer>
</article>
<article class="card" data-rating="5">
<header class="card-head">
<span class="avatar" aria-hidden="true">DO</span>
<div class="who">
<h3>Derek Osei</h3>
<span class="policy">Auto · Full coverage</span>
</div>
<span class="verified" title="Verified customer">✓ Verified</span>
</header>
<div class="stars" role="img" aria-label="Rated 5 out of 5"></div>
<blockquote>“Rear-ended on the highway. The app let me upload photos on the spot and a rental was approved before the tow truck even left.”</blockquote>
<footer class="stat"><strong>Rental approved same day</strong> · $6,850 paid</footer>
</article>
<article class="card" data-rating="4">
<header class="card-head">
<span class="avatar" aria-hidden="true">PK</span>
<div class="who">
<h3>Priya Kapoor</h3>
<span class="policy">Renters · Studio plan</span>
</div>
<span class="verified" title="Verified customer">✓ Verified</span>
</header>
<div class="stars" role="img" aria-label="Rated 4 out of 5"></div>
<blockquote>“My laptop was stolen from a café. The claim was approved quickly — the only snag was tracking down a receipt, but support walked me through it.”</blockquote>
<footer class="stat"><strong>Claim settled in 5 days</strong> · $1,940 paid</footer>
</article>
<article class="card" data-rating="5">
<header class="card-head">
<span class="avatar" aria-hidden="true">JT</span>
<div class="who">
<h3>James Thornton</h3>
<span class="policy">Life · Term 20</span>
</div>
<span class="verified" title="Verified customer">✓ Verified</span>
</header>
<div class="stars" role="img" aria-label="Rated 5 out of 5"></div>
<blockquote>“When my father passed, the team treated us like people, not a case number. The benefit was paid without us chasing a single form.”</blockquote>
<footer class="stat"><strong>Benefit paid in 6 days</strong> · $250,000 paid</footer>
</article>
<article class="card" data-rating="5">
<header class="card-head">
<span class="avatar" aria-hidden="true">LC</span>
<div class="who">
<h3>Lena Castellanos</h3>
<span class="policy">Pet · Wellness+</span>
</div>
<span class="verified" title="Verified customer">✓ Verified</span>
</header>
<div class="stars" role="img" aria-label="Rated 5 out of 5"></div>
<blockquote>“Our retriever needed emergency surgery. I submitted the vet invoice on Monday and was reimbursed by Thursday. It saved us a really stressful week.”</blockquote>
<footer class="stat"><strong>Reimbursed in 4 days</strong> · $3,420 paid</footer>
</article>
<article class="card" data-rating="4">
<header class="card-head">
<span class="avatar" aria-hidden="true">AW</span>
<div class="who">
<h3>Aaron Webb</h3>
<span class="policy">Travel · Annual multi-trip</span>
</div>
<span class="verified" title="Verified customer">✓ Verified</span>
</header>
<div class="stars" role="img" aria-label="Rated 4 out of 5"></div>
<blockquote>“A cancelled flight stranded us overnight in Lisbon. Hotel and meals were covered with a quick form — fast, even if I wished the limit was a touch higher.”</blockquote>
<footer class="stat"><strong>Claim settled in 2 days</strong> · $880 paid</footer>
</article>
</section>
<p class="empty" id="empty" hidden>No stories match this rating yet.</p>
</main>
<script src="script.js"></script>
</body>
</html>Customer Stories
A calm, trust-building testimonials block for an insurance brand. A confident trust band leads with big numbers — claims paid, average payout time and customers covered — followed by a grid of customer-story cards. Each card carries the customer’s name, the policy type they hold, a star rating, a real-sounding quote and a green claim-handled stat that turns a review into proof.
A small rating filter lets visitors narrow the grid to 5-star or 4-star-and-up stories, with a live count and an empty-state message. Everything is keyboard accessible with real headings, labelled controls and visible focus styles, and the layout collapses to a single column on narrow screens.
Illustrative UI only — not a real insurance product or customer endorsement.