Horizontal Cards
Full-width stacked horizontal cards split into a sand-toned portrait panel (left) and a quote + meta panel (right). Each reviewer has a verified SVG checkmark badge, portrait, name, title, company, and a source tag (G2, Capterra, etc). The featured card flips to a deep forest green. Playfair Display + Mulish. Use case: consulting / agency / professional services.
Horizontal Cards the 14th 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-hc" aria-label="Client stories">
<div class="tm-hc-eyebrow">Client Stories</div>
<h2 class="tm-hc-section-title">Real results from real people</h2>
<article class="tm-hc-card tm-hc-feat">
<div class="tm-hc-portrait-panel">
<div class="tm-hc-portrait-wrap">
<span class="tm-hc-portrait tm-hc-p-purple" aria-hidden="true"><span class="tm-hc-initials">NB</span></span>
<span class="tm-hc-verified-ring" aria-label="Verified">
<svg viewBox="0 0 10 8" aria-hidden="true"><path d="M1 4l3 3 5-6" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
</span>
</div>
<div class="tm-hc-portrait-name">Natalie Brooks</div>
<div class="tm-hc-portrait-role">Chief Marketing Officer</div>
<div class="tm-hc-portrait-company">Arcfield Digital</div>
</div>
<div class="tm-hc-content">
<div class="tm-hc-stars" aria-label="5 out of 5 stars">
<span class="tm-hc-star" aria-hidden="true">★</span>
<span class="tm-hc-star" aria-hidden="true">★</span>
<span class="tm-hc-star" aria-hidden="true">★</span>
<span class="tm-hc-star" aria-hidden="true">★</span>
<span class="tm-hc-star" aria-hidden="true">★</span>
</div>
<blockquote class="tm-hc-quote">"We ran a 90-day trial against our previous solution. The results were <em>not even close</em>. Conversion up 62%, churn down 18%, and our team actually enjoys using it. I don't say this lightly — it was the best vendor decision I've made in five years."</blockquote>
<div class="tm-hc-meta-row">
<span class="tm-hc-meta-item">90-day evaluation</span>
<span class="tm-hc-meta-dot" aria-hidden="true"></span>
<span class="tm-hc-meta-item">Enterprise plan</span>
<span class="tm-hc-source-tag">G2 · Verified</span>
</div>
</div>
</article>
<article class="tm-hc-card">
<div class="tm-hc-portrait-panel">
<div class="tm-hc-portrait-wrap">
<span class="tm-hc-portrait tm-hc-p-rose" aria-hidden="true"><span class="tm-hc-initials">HY</span></span>
<span class="tm-hc-verified-ring" aria-label="Verified">
<svg viewBox="0 0 10 8" aria-hidden="true"><path d="M1 4l3 3 5-6" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
</span>
</div>
<div class="tm-hc-portrait-name">Hiroshi Yamada</div>
<div class="tm-hc-portrait-role">Director of Engineering</div>
<div class="tm-hc-portrait-company">Synth Systems</div>
</div>
<div class="tm-hc-content">
<div class="tm-hc-stars" aria-label="5 out of 5 stars">
<span class="tm-hc-star">★</span><span class="tm-hc-star">★</span><span class="tm-hc-star">★</span><span class="tm-hc-star">★</span><span class="tm-hc-star">★</span>
</div>
<blockquote class="tm-hc-quote">"The API documentation is the <em>best I've ever read</em>. I gave it to three junior devs with no briefing. They were productive in two hours."</blockquote>
<div class="tm-hc-meta-row">
<span class="tm-hc-meta-item">Developer plan</span>
<span class="tm-hc-meta-dot" aria-hidden="true"></span>
<span class="tm-hc-meta-item">14 months active</span>
<span class="tm-hc-source-tag">Capterra</span>
</div>
</div>
</article>
<article class="tm-hc-card">
<div class="tm-hc-portrait-panel">
<div class="tm-hc-portrait-wrap">
<span class="tm-hc-portrait tm-hc-p-slate" aria-hidden="true"><span class="tm-hc-initials">PS</span></span>
<span class="tm-hc-verified-ring" aria-label="Verified">
<svg viewBox="0 0 10 8" aria-hidden="true"><path d="M1 4l3 3 5-6" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
</span>
</div>
<div class="tm-hc-portrait-name">Priya Sharma</div>
<div class="tm-hc-portrait-role">Founder & CEO</div>
<div class="tm-hc-portrait-company">Kova Studio</div>
</div>
<div class="tm-hc-content">
<div class="tm-hc-stars" aria-label="5 out of 5 stars">
<span class="tm-hc-star">★</span><span class="tm-hc-star">★</span><span class="tm-hc-star">★</span><span class="tm-hc-star">★</span><span class="tm-hc-star">★</span>
</div>
<blockquote class="tm-hc-quote">"As a solo founder, I needed something I could operate without a team behind it. This is <em>genuinely that product</em>. Everything just works."</blockquote>
<div class="tm-hc-meta-row">
<span class="tm-hc-meta-item">Solo plan</span>
<span class="tm-hc-meta-dot" aria-hidden="true"></span>
<span class="tm-hc-meta-item">2 years active</span>
<span class="tm-hc-source-tag">Trustpilot</span>
</div>
</div>
</article>
<article class="tm-hc-card">
<div class="tm-hc-portrait-panel">
<div class="tm-hc-portrait-wrap">
<span class="tm-hc-portrait tm-hc-p-cyan" aria-hidden="true"><span class="tm-hc-initials">LF</span></span>
<span class="tm-hc-verified-ring" aria-label="Verified">
<svg viewBox="0 0 10 8" aria-hidden="true"><path d="M1 4l3 3 5-6" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
</span>
</div>
<div class="tm-hc-portrait-name">Leon Fischer</div>
<div class="tm-hc-portrait-role">Head of Data</div>
<div class="tm-hc-portrait-company">Veldtwerk GmbH</div>
</div>
<div class="tm-hc-content">
<div class="tm-hc-stars" aria-label="5 out of 5 stars">
<span class="tm-hc-star">★</span><span class="tm-hc-star">★</span><span class="tm-hc-star">★</span><span class="tm-hc-star">★</span><span class="tm-hc-star">★</span>
</div>
<blockquote class="tm-hc-quote">"The analytics dashboard gives me <em>answers I didn't know to ask for</em>. Every Monday I discover something new about our users that changes how we prioritize."</blockquote>
<div class="tm-hc-meta-row">
<span class="tm-hc-meta-item">Growth plan</span>
<span class="tm-hc-meta-dot" aria-hidden="true"></span>
<span class="tm-hc-meta-item">18 months active</span>
<span class="tm-hc-source-tag">LinkedIn</span>
</div>
</div>
</article>
</section> /* Horizontal Cards — 2-col split: sand portrait panel | quote panel.
Featured card swaps sand for accent (deep forest green). Verified
ring badge sits at the corner of the portrait. Slide-in entrance
from the left for a directional, list-like reveal. */
.tm-hc {
--tm-hc-bg: #fafaf8;
--tm-hc-white: #ffffff;
--tm-hc-ink: #18181b;
--tm-hc-muted: #71717a;
--tm-hc-line: #e4e4e7;
--tm-hc-accent: #1c4a3f;
--tm-hc-accent-l: #d1f0e8;
--tm-hc-warm: #f9f6f1;
padding: clamp(32px, 4vw, 52px) clamp(20px, 3vw, 56px);
background: var(--tm-hc-bg);
font-family: 'Mulish', system-ui, sans-serif;
min-height: 520px;
}
.tm-hc-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--tm-hc-accent);
margin-bottom: 10px;
}
.tm-hc-section-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 400;
color: var(--tm-hc-ink);
margin: 0 0 32px;
line-height: 1.25;
}
.tm-hc-card {
display: grid;
grid-template-columns: 180px 1fr;
background: var(--tm-hc-white);
border: 1px solid var(--tm-hc-line);
border-radius: 10px;
overflow: hidden;
margin-bottom: 14px;
transition: box-shadow 0.3s ease, transform 0.3s ease;
animation: tm-hc-slidein 0.6s ease both;
}
.tm-hc-card:hover {
box-shadow: 0 8px 28px rgba(0,0,0,0.07);
transform: translateY(-2px);
}
.tm-hc-card:nth-child(1) { animation-delay: 0.04s; }
.tm-hc-card:nth-child(2) { animation-delay: 0.12s; }
.tm-hc-card:nth-child(3) { animation-delay: 0.20s; }
.tm-hc-card:nth-child(4) { animation-delay: 0.28s; }
.tm-hc-card:nth-child(5) { animation-delay: 0.36s; }
@keyframes tm-hc-slidein {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
.tm-hc-portrait-panel {
background: var(--tm-hc-warm);
padding: 24px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
border-right: 1px solid var(--tm-hc-line);
text-align: center;
}
.tm-hc-portrait-wrap { position: relative; }
.tm-hc-portrait {
width: 72px;
height: 72px;
border-radius: 50%;
border: 3px solid var(--tm-hc-white);
box-shadow: 0 0 0 2px var(--tm-hc-line);
display: flex;
align-items: center;
justify-content: center;
}
.tm-hc-p-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.tm-hc-p-rose { background: linear-gradient(135deg, #f472b6, #be185d); }
.tm-hc-p-slate { background: linear-gradient(135deg, #64748b, #334155); }
.tm-hc-p-cyan { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.tm-hc-initials {
font-family: 'Mulish', system-ui, sans-serif;
font-size: 22px;
font-weight: 700;
color: #fff;
letter-spacing: 0.02em;
}
.tm-hc-verified-ring {
position: absolute;
bottom: 2px;
right: 2px;
width: 18px;
height: 18px;
background: var(--tm-hc-accent);
border-radius: 50%;
border: 2px solid var(--tm-hc-white);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.tm-hc-verified-ring svg { width: 8px; height: 8px; }
.tm-hc-portrait-name {
font-size: 12px;
font-weight: 700;
color: var(--tm-hc-ink);
line-height: 1.3;
}
.tm-hc-portrait-role {
font-size: 10px;
color: var(--tm-hc-muted);
line-height: 1.4;
font-weight: 400;
}
.tm-hc-portrait-company {
font-size: 10px;
font-weight: 600;
color: var(--tm-hc-accent);
margin-top: 2px;
}
.tm-hc-content {
padding: 26px 28px;
display: flex;
flex-direction: column;
justify-content: center;
}
.tm-hc-stars {
display: flex;
gap: 2px;
margin-bottom: 12px;
}
.tm-hc-star {
color: #f59e0b;
font-size: 12px;
}
.tm-hc-quote {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 1.05rem;
line-height: 1.65;
color: #3f3f46;
margin: 0 0 14px;
}
.tm-hc-quote em {
font-style: normal;
color: var(--tm-hc-accent);
font-weight: 600;
}
.tm-hc-meta-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.tm-hc-meta-item {
font-size: 10px;
color: var(--tm-hc-muted);
display: flex;
align-items: center;
}
.tm-hc-meta-dot {
width: 3px;
height: 3px;
background: var(--tm-hc-line);
border-radius: 50%;
}
.tm-hc-source-tag {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--tm-hc-muted);
background: var(--tm-hc-warm);
border: 1px solid var(--tm-hc-line);
padding: 3px 8px;
border-radius: 4px;
margin-left: auto;
}
/* Featured: deep forest green panel */
.tm-hc-feat { border-color: var(--tm-hc-accent); }
.tm-hc-feat .tm-hc-portrait-panel {
background: var(--tm-hc-accent);
border-right-color: rgba(255,255,255,0.15);
}
.tm-hc-feat .tm-hc-portrait-name { color: #fff; }
.tm-hc-feat .tm-hc-portrait-role { color: rgba(255,255,255,0.6); }
.tm-hc-feat .tm-hc-portrait-company { color: rgba(255,255,255,0.8); }
.tm-hc-feat .tm-hc-portrait { box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
.tm-hc-feat .tm-hc-verified-ring { background: #fff; color: var(--tm-hc-accent); }
@media (max-width: 720px) {
.tm-hc-card { grid-template-columns: 1fr; }
.tm-hc-portrait-panel { border-right: none; border-bottom: 1px solid var(--tm-hc-line); }
}
@media (prefers-reduced-motion: reduce) {
.tm-hc-card { animation: none; transition: none; }
.tm-hc-card:hover { transform: none; }
}