Minimal White Cards
Clean 3-column card grid on a soft grey background. Each card has a circular portrait at the top, a Lora italic serif quote with blue emphasis, and an author row with a smaller portrait + name + role. One dark navy featured card breaks the rhythm. Lora + Inter typography. Use case: SaaS / B2B platform.
Minimal White Cards the 13th of 15 designs in the 15 CSS Testimonials & Reviews collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<section class="tm-mwc" aria-label="Customer testimonials">
<header class="tm-mwc-section-label">
<span class="tm-mwc-sl-text">What our customers say</span>
<span class="tm-mwc-sl-line" aria-hidden="true"></span>
</header>
<h2 class="tm-mwc-section-title">Trusted by thousands of teams worldwide</h2>
<div class="tm-mwc-grid">
<article class="tm-mwc-card">
<div class="tm-mwc-portrait tm-mwc-portrait-blue" aria-hidden="true">
<span class="tm-mwc-initials">SC</span>
</div>
<div class="tm-mwc-rating-block">
<span class="tm-mwc-rating-num">5.0</span>
<span class="tm-mwc-stars" aria-label="5 out of 5 stars">
<span class="tm-mwc-star" aria-hidden="true">★</span>
<span class="tm-mwc-star" aria-hidden="true">★</span>
<span class="tm-mwc-star" aria-hidden="true">★</span>
<span class="tm-mwc-star" aria-hidden="true">★</span>
<span class="tm-mwc-star" aria-hidden="true">★</span>
</span>
<span class="tm-mwc-rating-ct">· Verified</span>
</div>
<blockquote class="tm-mwc-quote">"The onboarding was so smooth I had my whole team up and running in <em>a single afternoon</em>. That never happens."</blockquote>
<figcaption class="tm-mwc-author-row">
<span class="tm-mwc-author-portrait tm-mwc-portrait-blue" aria-hidden="true">SC</span>
<span><cite class="tm-mwc-author-name">Sarah Chen</cite><span class="tm-mwc-author-role">Head of Product, Relay</span></span>
</figcaption>
</article>
<article class="tm-mwc-card">
<div class="tm-mwc-portrait tm-mwc-portrait-teal" aria-hidden="true">
<span class="tm-mwc-initials">MW</span>
</div>
<div class="tm-mwc-rating-block">
<span class="tm-mwc-rating-num">5.0</span>
<span class="tm-mwc-stars" aria-label="5 out of 5 stars">
<span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span>
</span>
<span class="tm-mwc-rating-ct">· Verified</span>
</div>
<blockquote class="tm-mwc-quote">"Replaced three different tools and <em>cut our monthly spend by 40%</em>. The ROI was visible in week one."</blockquote>
<figcaption class="tm-mwc-author-row">
<span class="tm-mwc-author-portrait tm-mwc-portrait-teal" aria-hidden="true">MW</span>
<span><cite class="tm-mwc-author-name">Marcus Williams</cite><span class="tm-mwc-author-role">CTO, Stackframe</span></span>
</figcaption>
</article>
<article class="tm-mwc-card">
<div class="tm-mwc-portrait tm-mwc-portrait-amber" aria-hidden="true">
<span class="tm-mwc-initials">IM</span>
</div>
<div class="tm-mwc-rating-block">
<span class="tm-mwc-rating-num">5.0</span>
<span class="tm-mwc-stars" aria-label="5 out of 5 stars">
<span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span>
</span>
<span class="tm-mwc-rating-ct">· Verified</span>
</div>
<blockquote class="tm-mwc-quote">"Customer support replied in <em>four minutes</em> on a Sunday. I didn't even know that was possible from a SaaS company."</blockquote>
<figcaption class="tm-mwc-author-row">
<span class="tm-mwc-author-portrait tm-mwc-portrait-amber" aria-hidden="true">IM</span>
<span><cite class="tm-mwc-author-name">Isabelle Morel</cite><span class="tm-mwc-author-role">VP Operations, Cove</span></span>
</figcaption>
</article>
</div>
<div class="tm-mwc-grid2">
<article class="tm-mwc-card tm-mwc-feat">
<div class="tm-mwc-portrait tm-mwc-portrait-indigo" aria-hidden="true">
<span class="tm-mwc-initials">DP</span>
</div>
<div class="tm-mwc-rating-block">
<span class="tm-mwc-rating-num">5.0</span>
<span class="tm-mwc-stars" aria-label="5 out of 5 stars">
<span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span>
</span>
<span class="tm-mwc-rating-ct">· Verified</span>
</div>
<blockquote class="tm-mwc-quote">"We evaluated six platforms over three months. This one wasn't just the best — it was <em>in a different category</em> from the rest. The depth of integrations, the API quality, the docs — nothing else came close."</blockquote>
<figcaption class="tm-mwc-author-row">
<span class="tm-mwc-author-portrait tm-mwc-portrait-indigo" aria-hidden="true">DP</span>
<span><cite class="tm-mwc-author-name">Daniel Park</cite><span class="tm-mwc-author-role">Engineering Lead, Meridian Cloud</span></span>
</figcaption>
</article>
<article class="tm-mwc-card">
<div class="tm-mwc-portrait tm-mwc-portrait-green" aria-hidden="true">
<span class="tm-mwc-initials">AO</span>
</div>
<span class="tm-mwc-verified-chip">
<span class="tm-mwc-vc-dot" aria-hidden="true"></span> Verified customer
</span>
<div class="tm-mwc-stars" aria-label="5 out of 5 stars" style="margin-bottom:14px">
<span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span>
</div>
<blockquote class="tm-mwc-quote">"Shipped faster in the first month than the entire previous quarter. The <em>workflow automation</em> alone saved us 15 hours a week."</blockquote>
<figcaption class="tm-mwc-author-row">
<span class="tm-mwc-author-portrait tm-mwc-portrait-green" aria-hidden="true">AO</span>
<span><cite class="tm-mwc-author-name">Amara Osei</cite><span class="tm-mwc-author-role">Founder, Lumen Analytics</span></span>
</figcaption>
</article>
</div>
</section> /* Minimal White Cards — clean 3-col grid + 2-col bottom row. The
featured card flips to a dark navy panel for contrast. Portraits
use colored initial-circles instead of stock photos so the demo
stays slim and self-contained (no external image dependency). */
.tm-mwc {
--tm-mwc-bg: #f6f7f9;
--tm-mwc-white: #ffffff;
--tm-mwc-ink: #111827;
--tm-mwc-muted: #6b7280;
--tm-mwc-border: #e5e7eb;
--tm-mwc-blue: #2563eb;
position: relative;
padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 52px);
background: var(--tm-mwc-bg);
font-family: 'Inter', system-ui, sans-serif;
min-height: 520px;
}
.tm-mwc-section-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.tm-mwc-sl-text {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--tm-mwc-muted);
}
.tm-mwc-sl-line {
flex: 1;
height: 1px;
background: var(--tm-mwc-border);
}
.tm-mwc-section-title {
font-family: 'Lora', Georgia, serif;
font-size: clamp(1.4rem, 2.4vw, 1.7rem);
font-weight: 500;
color: var(--tm-mwc-ink);
margin: 0 0 36px;
max-width: 480px;
line-height: 1.3;
}
.tm-mwc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.tm-mwc-grid2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.tm-mwc-card {
background: var(--tm-mwc-white);
border: 1px solid var(--tm-mwc-border);
border-radius: 12px;
padding: 30px 26px;
position: relative;
transition: box-shadow 0.25s ease, transform 0.25s ease;
animation: tm-mwc-fadeup 0.6s ease both;
display: flex;
flex-direction: column;
}
.tm-mwc-card:hover {
box-shadow: 0 12px 32px rgba(0,0,0,0.08);
transform: translateY(-3px);
}
.tm-mwc-grid .tm-mwc-card:nth-child(1) { animation-delay: 0.05s; }
.tm-mwc-grid .tm-mwc-card:nth-child(2) { animation-delay: 0.12s; }
.tm-mwc-grid .tm-mwc-card:nth-child(3) { animation-delay: 0.19s; }
.tm-mwc-grid2 .tm-mwc-card:nth-child(1) { animation-delay: 0.26s; }
.tm-mwc-grid2 .tm-mwc-card:nth-child(2) { animation-delay: 0.32s; }
@keyframes tm-mwc-fadeup {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.tm-mwc-portrait {
width: 60px;
height: 60px;
border-radius: 50%;
margin-bottom: 18px;
border: 2px solid var(--tm-mwc-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tm-mwc-initials {
font-family: 'Inter', system-ui, sans-serif;
font-size: 18px;
font-weight: 600;
color: #fff;
letter-spacing: 0.02em;
}
.tm-mwc-portrait-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.tm-mwc-portrait-teal { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.tm-mwc-portrait-amber { background: linear-gradient(135deg, #f59e0b, #b45309); }
.tm-mwc-portrait-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); }
.tm-mwc-portrait-green { background: linear-gradient(135deg, #22c55e, #15803d); }
.tm-mwc-rating-block {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.tm-mwc-rating-num {
font-size: 1rem;
font-weight: 600;
color: var(--tm-mwc-ink);
}
.tm-mwc-stars {
display: inline-flex;
gap: 2px;
}
.tm-mwc-star {
color: #f59e0b;
font-size: 13px;
}
.tm-mwc-rating-ct {
font-size: 11px;
color: var(--tm-mwc-muted);
}
.tm-mwc-quote {
font-family: 'Lora', Georgia, serif;
font-style: italic;
font-size: 1rem;
line-height: 1.7;
color: #374151;
margin: 0 0 20px;
flex: 1;
}
.tm-mwc-quote em {
font-style: normal;
color: var(--tm-mwc-blue);
font-weight: 500;
}
.tm-mwc-author-row {
display: flex;
align-items: center;
gap: 12px;
padding-top: 18px;
border-top: 1px solid var(--tm-mwc-border);
}
.tm-mwc-author-portrait {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
border: 1.5px solid var(--tm-mwc-border);
margin-bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
color: #fff;
}
.tm-mwc-author-name {
display: block;
font-size: 13px;
font-weight: 600;
font-style: normal;
color: var(--tm-mwc-ink);
line-height: 1.3;
}
.tm-mwc-author-role {
font-size: 11px;
color: var(--tm-mwc-muted);
margin-top: 2px;
display: block;
}
.tm-mwc-verified-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
color: #16a34a;
background: #f0fdf4;
border: 1px solid #bbf7d0;
padding: 3px 8px;
border-radius: 20px;
margin-bottom: 14px;
width: fit-content;
}
.tm-mwc-vc-dot {
width: 5px;
height: 5px;
background: #16a34a;
border-radius: 50%;
}
/* Dark featured card */
.tm-mwc-feat {
background: var(--tm-mwc-ink);
border-color: transparent;
}
.tm-mwc-feat .tm-mwc-quote { color: rgba(255,255,255,0.8); }
.tm-mwc-feat .tm-mwc-quote em { color: #93c5fd; }
.tm-mwc-feat .tm-mwc-author-name { color: #fff; }
.tm-mwc-feat .tm-mwc-author-role { color: rgba(255,255,255,0.5); }
.tm-mwc-feat .tm-mwc-author-row { border-top-color: rgba(255,255,255,0.1); }
.tm-mwc-feat .tm-mwc-rating-num { color: #fff; }
.tm-mwc-feat .tm-mwc-rating-ct { color: rgba(255,255,255,0.4); }
.tm-mwc-feat .tm-mwc-portrait,
.tm-mwc-feat .tm-mwc-author-portrait { border-color: rgba(255,255,255,0.15); }
@media (max-width: 820px) {
.tm-mwc-grid, .tm-mwc-grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.tm-mwc-card { animation: none; transition: none; }
.tm-mwc-card:hover { transform: none; }
}