HTML
<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> CSS
/* 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; }
}