Agency Minimal — Live CSS Playground

{CF} CodeFronts Back to CSS Testimonials & Reviews Agency Minimal Pure CSS

HTML

<section class="tm-min" aria-label="Client testimonials">
  <header class="tm-min-topbar">
    <div class="tm-min-topbar-l">Client testimonials &middot; Verified &middot; 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 &middot; 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>

CSS

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