Agency Minimal
Clean 5-column table-style list with full-bleed hover, slide-in row animations, a live-pulse "reviews this week" indicator, and a summary stat bar. Use case: design / consulting agency or professional services. Libre Baskerville italic for the pull quotes, Space Mono for metadata.
Agency Minimal the 6th 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-min" aria-label="Client testimonials">
<header class="tm-min-topbar">
<div class="tm-min-topbar-l">Client testimonials · Verified · 2024</div>
<div class="tm-min-topbar-r">
<span class="tm-min-live-dot" aria-hidden="true"></span>
<span class="tm-min-live-text">Live · 348 reviews this week</span>
</div>
</header>
<div class="tm-min-list">
<article class="tm-min-row">
<div class="tm-min-idx" aria-hidden="true">01</div>
<div class="tm-min-author-col">
<span class="tm-min-av" aria-hidden="true">EL</span>
<cite class="tm-min-an">Elena Lowe</cite>
<span class="tm-min-ar">CPO<br>Meridian Labs</span>
</div>
<div class="tm-min-quote-col">
<blockquote class="tm-min-q-main">"The kind of clarity we'd been trying to manufacture for two years — they delivered in six weeks."</blockquote>
<p class="tm-min-q-body">Product strategy, design system, and go-to-market narrative all aligned for the first time. I didn't think that was achievable in a single engagement.</p>
</div>
<div class="tm-min-meta-col">
<div class="tm-min-meta-label">Service</div>
<div class="tm-min-meta-val">Brand Strategy</div>
<div class="tm-min-meta-label">Duration</div>
<div class="tm-min-meta-val">6 weeks</div>
</div>
<div class="tm-min-stars-col">
<div class="tm-min-star-num">5.0</div>
<div class="tm-min-star-sub">out of 5</div>
<div class="tm-min-pip-row" aria-label="5 out of 5">
<span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span>
</div>
</div>
</article>
<article class="tm-min-row">
<div class="tm-min-idx" aria-hidden="true">02</div>
<div class="tm-min-author-col">
<span class="tm-min-av" aria-hidden="true">DS</span>
<cite class="tm-min-an">David Soo</cite>
<span class="tm-min-ar">Founder<br>Arclight Ventures</span>
</div>
<div class="tm-min-quote-col">
<blockquote class="tm-min-q-main">"Our fundraise closed at 140% of target. I trace a meaningful portion of that to the narrative work they did."</blockquote>
<p class="tm-min-q-body">Investors kept commenting on how clear and compelling our pitch was. That clarity came from this team.</p>
</div>
<div class="tm-min-meta-col">
<div class="tm-min-meta-label">Service</div>
<div class="tm-min-meta-val">Pitch Design</div>
<div class="tm-min-meta-label">Duration</div>
<div class="tm-min-meta-val">3 weeks</div>
</div>
<div class="tm-min-stars-col">
<div class="tm-min-star-num">5.0</div>
<div class="tm-min-star-sub">out of 5</div>
<div class="tm-min-pip-row" aria-label="5 out of 5">
<span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span>
</div>
</div>
</article>
<article class="tm-min-row">
<div class="tm-min-idx" aria-hidden="true">03</div>
<div class="tm-min-author-col">
<span class="tm-min-av" aria-hidden="true">NH</span>
<cite class="tm-min-an">Nour Hassan</cite>
<span class="tm-min-ar">Head of Design<br>Forma Studio</span>
</div>
<div class="tm-min-quote-col">
<blockquote class="tm-min-q-main">"They didn't just execute the brief. They improved it."</blockquote>
<p class="tm-min-q-body">Every design handoff came with a rationale I could explain to my stakeholders. That saved me hours of back-and-forth every single week.</p>
</div>
<div class="tm-min-meta-col">
<div class="tm-min-meta-label">Service</div>
<div class="tm-min-meta-val">UI / Design</div>
<div class="tm-min-meta-label">Duration</div>
<div class="tm-min-meta-val">Ongoing</div>
</div>
<div class="tm-min-stars-col">
<div class="tm-min-star-num">4.9</div>
<div class="tm-min-star-sub">out of 5</div>
<div class="tm-min-pip-row" aria-label="4.9 out of 5">
<span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip tm-min-pip-half"></span>
</div>
</div>
</article>
<article class="tm-min-row">
<div class="tm-min-idx" aria-hidden="true">04</div>
<div class="tm-min-author-col">
<span class="tm-min-av" aria-hidden="true">KW</span>
<cite class="tm-min-an">Kate Wynne</cite>
<span class="tm-min-ar">CEO<br>Ovation Health</span>
</div>
<div class="tm-min-quote-col">
<blockquote class="tm-min-q-main">"We rebranded during our most critical growth phase. It was bold and it was right."</blockquote>
<p class="tm-min-q-body">Our NPS jumped 18 points in the quarter following launch. Coincidence? Our team doesn't think so.</p>
</div>
<div class="tm-min-meta-col">
<div class="tm-min-meta-label">Service</div>
<div class="tm-min-meta-val">Rebrand</div>
<div class="tm-min-meta-label">Duration</div>
<div class="tm-min-meta-val">12 weeks</div>
</div>
<div class="tm-min-stars-col">
<div class="tm-min-star-num">5.0</div>
<div class="tm-min-star-sub">out of 5</div>
<div class="tm-min-pip-row" aria-label="5 out of 5">
<span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span>
</div>
</div>
</article>
</div>
<footer class="tm-min-sum-row">
<div class="tm-min-sum-stat"><div class="tm-min-sum-num">4.98</div><div class="tm-min-sum-lbl">Avg. score</div></div>
<div class="tm-min-sum-divider" aria-hidden="true"></div>
<div class="tm-min-sum-stat"><div class="tm-min-sum-num">348</div><div class="tm-min-sum-lbl">Reviews / week</div></div>
<div class="tm-min-sum-divider" aria-hidden="true"></div>
<div class="tm-min-sum-stat"><div class="tm-min-sum-num">100%</div><div class="tm-min-sum-lbl">Verified clients</div></div>
<div class="tm-min-sum-divider" aria-hidden="true"></div>
<div class="tm-min-sum-stat"><div class="tm-min-sum-num">96%</div><div class="tm-min-sum-lbl">Recommend</div></div>
</footer>
</section> /* Agency Minimal — clean 5-col table list. Each .tm-min-row is a
semantic <article>. On hover the row gets a warm tint and "bleeds"
visually full-width via negative margin. The live-pulse dot signals
freshness. Library Baskerville italic for the pull quote distinguishes
it from the body copy; Space Mono drives every uppercase metadata. */
.tm-min {
--tm-min-bg: #f8f7f4;
--tm-min-ink: #111111;
--tm-min-border: #e0ddd6;
--tm-min-accent: #2563eb;
--tm-min-muted: #888880;
--tm-min-warm: #f0ece4;
position: relative;
padding: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 40px);
background: var(--tm-min-bg);
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
color: var(--tm-min-ink);
min-height: 520px;
}
.tm-min-topbar {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid var(--tm-min-border);
padding-bottom: 16px;
margin-bottom: 36px;
}
.tm-min-topbar-l {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tm-min-muted);
}
.tm-min-topbar-r {
display: flex;
align-items: center;
gap: 6px;
}
.tm-min-live-dot {
width: 6px;
height: 6px;
background: #22c55e;
border-radius: 50%;
animation: tm-min-livepulse 2s infinite;
}
@keyframes tm-min-livepulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}
.tm-min-live-text {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #22c55e;
}
.tm-min-list {
display: flex;
flex-direction: column;
}
.tm-min-row {
display: grid;
grid-template-columns: 40px 1fr 2.5fr 1.2fr 120px;
align-items: start;
gap: 0;
border-bottom: 1px solid var(--tm-min-border);
padding: 24px 0;
transition: background 0.2s, padding 0.2s, margin 0.2s;
animation: tm-min-rowin 0.6s ease both;
}
.tm-min-row:first-child { border-top: 1px solid var(--tm-min-border); }
.tm-min-row:hover {
background: var(--tm-min-warm);
margin: 0 calc(-1 * clamp(20px, 3vw, 40px));
padding-left: clamp(20px, 3vw, 40px);
padding-right: clamp(20px, 3vw, 40px);
}
.tm-min-row:nth-child(1) { animation-delay: 0.04s; }
.tm-min-row:nth-child(2) { animation-delay: 0.10s; }
.tm-min-row:nth-child(3) { animation-delay: 0.16s; }
.tm-min-row:nth-child(4) { animation-delay: 0.22s; }
@keyframes tm-min-rowin {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
.tm-min-idx {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 11px;
color: var(--tm-min-muted);
padding-top: 4px;
}
.tm-min-author-col { padding-right: 24px; }
.tm-min-av {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--tm-min-ink);
color: var(--tm-min-bg);
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10px;
margin-bottom: 8px;
}
.tm-min-an {
display: block;
font-style: normal;
font-size: 13px;
font-weight: 500;
color: var(--tm-min-ink);
line-height: 1.3;
}
.tm-min-ar {
font-size: 10px;
color: var(--tm-min-muted);
margin-top: 2px;
line-height: 1.4;
display: block;
}
.tm-min-quote-col { padding-right: 32px; }
.tm-min-q-main {
font-family: 'Libre Baskerville', Georgia, serif;
font-style: italic;
font-size: 1.1rem;
line-height: 1.6;
color: var(--tm-min-ink);
margin: 0 0 12px;
}
.tm-min-q-body {
font-size: 0.82rem;
line-height: 1.7;
color: #555;
font-weight: 300;
margin: 0;
}
.tm-min-meta-col { padding-right: 16px; }
.tm-min-meta-label {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tm-min-muted);
margin-bottom: 6px;
}
.tm-min-meta-val {
font-size: 12px;
color: var(--tm-min-ink);
font-weight: 500;
margin-bottom: 12px;
}
.tm-min-stars-col { text-align: right; }
.tm-min-star-num {
font-family: 'Libre Baskerville', Georgia, serif;
font-size: 1.7rem;
color: var(--tm-min-ink);
line-height: 1;
}
.tm-min-star-sub {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tm-min-muted);
margin-top: 4px;
}
.tm-min-pip-row {
display: flex;
gap: 3px;
justify-content: flex-end;
margin-top: 8px;
}
.tm-min-pip {
width: 16px;
height: 3px;
background: var(--tm-min-ink);
border-radius: 2px;
}
.tm-min-pip-half {
background: linear-gradient(to right, var(--tm-min-ink) 80%, var(--tm-min-border) 80%);
}
.tm-min-sum-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 32px;
padding-top: 20px;
border-top: 2px solid var(--tm-min-ink);
}
.tm-min-sum-stat {
text-align: center;
flex: 1;
}
.tm-min-sum-num {
font-family: 'Libre Baskerville', Georgia, serif;
font-size: 1.8rem;
color: var(--tm-min-ink);
}
.tm-min-sum-lbl {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tm-min-muted);
margin-top: 4px;
}
.tm-min-sum-divider {
width: 1px;
height: 40px;
background: var(--tm-min-border);
flex-shrink: 0;
}
@media (max-width: 820px) {
.tm-min-row {
grid-template-columns: 30px 1fr;
gap: 12px 8px;
}
.tm-min-quote-col, .tm-min-meta-col, .tm-min-stars-col {
grid-column: 2;
padding-right: 0;
margin-top: 12px;
text-align: left;
}
.tm-min-pip-row { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.tm-min-row { animation: none; transition: none; }
.tm-min-row:hover { margin: 0; padding-left: 0; padding-right: 0; }
.tm-min-live-dot { animation: none; }
}