Blocks / Testimonials

Testimonials beta

Three voices, named and pictured — proof that reads as people, not as marketing.

Preview

We closed October in two days. The checklist alone was worth the switch — nothing hides, everything reconciles.

AKAoi KimuraFinance lead, Nordic Studio

I send the invoice from the train home. By the time a client pays, the books already know.

RSRen SatoFreelance designer

Support answered at 11pm with the actual fix, not a link to a help article. That has never happened before.

MCMei ChenOwner, Harbourlight

Built from: Card, Avatar — include their CSS alongside this block.

<section class="k-tst" style="max-width:760px">
  <div class="k-tst-grid">
    <div class="k-card"><div class="k-card-b"><div class="stars"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg></div><q>We closed October in two days. The checklist alone was worth the switch — nothing hides, everything reconciles.</q><div class="who"><span class="k-avatar">AK</span><span><b>Aoi Kimura</b><span>Finance lead, Nordic Studio</span></span></div></div></div>
    <div class="k-card"><div class="k-card-b"><div class="stars"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg></div><q>I send the invoice from the train home. By the time a client pays, the books already know.</q><div class="who"><span class="k-avatar">RS</span><span><b>Ren Sato</b><span>Freelance designer</span></span></div></div></div>
    <div class="k-card"><div class="k-card-b"><div class="stars"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3.6 2.5 5.3 5.8.7-4.3 4 1.1 5.7L12 16.5l-5.1 2.8L8 13.6 3.7 9.6l5.8-.7L12 3.6Z"/></svg></div><q>Support answered at 11pm with the actual fix, not a link to a help article. That has never happened before.</q><div class="who"><span class="k-avatar">MC</span><span><b>Mei Chen</b><span>Owner, Harbourlight</span></span></div></div></div>
  </div>
</section>

.k-tst{font-family:var(--k-font);text-align:left;color:var(--k-ink)}
.k-tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:720px){.k-tst-grid{grid-template-columns:1fr}}
.k-tst q{font-size:14px;line-height:1.8;color:var(--k-ink);quotes:"“" "”"}
.k-tst .who{display:flex;align-items:center;gap:10px;margin-top:14px}
.k-tst .who b{font-size:13px;display:block}
.k-tst .who span{font-size:11.5px;color:var(--k-ink-3)}
.k-tst .stars{color:var(--k-accent);display:flex;gap:2px;margin-bottom:11px}

Usage

For the proof section of a landing page. Every quote is attributed to a named person at a named company; anonymous praise convinces no one.

Stat Cards

Use Cases