GitHub

Blocks / Use Cases

Use Cases beta

A numbered switcher: pick the reader you are, and the picture changes with the story.

Preview
Invoices Current
1Nordic StudioPaid
2Kessler GmbHDue in 3 days
3HarbourlightOverdue

Built from: Aurora, Glass Panel, Button, Badge, Progress — include their CSS alongside this block.

<section class="k-uc" style="max-width:760px">
  <div class="k-uc-list">
    <button class="k-uc-row open" data-uc-row type="button" aria-expanded="true"><span class="k-uc-head"><span class="no">01</span><span class="lb">Freelancers</span><span class="pl"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></span></span><span class="k-uc-body"><h4>Get paid without chasing.</h4><p>Send invoices in seconds, see who has paid at a glance, and let polite reminders go out on their own.</p><ul><li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Invoices tracked from send to paid</li><li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Automatic payment reminders</li><li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Taxes set aside as you earn</li></ul></span></button>
    <button class="k-uc-row" data-uc-row type="button" aria-expanded="false"><span class="k-uc-head"><span class="no">02</span><span class="lb">Small businesses</span><span class="pl"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></span></span><span class="k-uc-body"><h4>Every way you earn, one ledger.</h4><p>Shops, invoices and payouts land in one place, so the week closes itself instead of your Sunday.</p><ul><li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Revenue and orders in real time</li><li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Refunds without the spreadsheet</li><li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Progress toward monthly goals</li></ul></span></button>
    <button class="k-uc-row" data-uc-row type="button" aria-expanded="false"><span class="k-uc-head"><span class="no">03</span><span class="lb">Finance teams</span><span class="pl"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></span></span><span class="k-uc-body"><h4>Close the month in days.</h4><p>Reconciliation, exceptions and exports follow the same checklist every month — auditable by construction.</p><ul><li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Reconcile with a paper trail</li><li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Exceptions flagged, not buried</li><li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> One-click ledger export</li></ul></span></button>
    <button class="k-uc-row" data-uc-row type="button" aria-expanded="false"><span class="k-uc-head"><span class="no">04</span><span class="lb">Founders</span><span class="pl"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></span></span><span class="k-uc-body"><h4>Know the runway, always.</h4><p>Burn, cash and runway stay current without a finance hire, so the next decision is made on numbers, not vibes.</p><ul><li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Runway computed daily</li><li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Burn by category</li><li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 12.5 5 5L19.5 6.5"/></svg> Cash across every account</li></ul></span></button>
  </div>
  <div class="k-uc-stage">
    <div class="k-aurora" aria-hidden="true"><i class="b1"></i><i class="b2"></i><i class="b3"></i></div>
    <div class="k-uc-scene" data-uc-scene><div class="k-glass" data-theme="dark"><div class="k-glass-h">Invoices <span>Current</span></div><div class="k-glass-row"><span class="k-glass-num">1</span>Nordic Studio<span class="k-glass-val">Paid</span></div><div class="k-glass-row"><span class="k-glass-num">2</span>Kessler GmbH<span class="k-glass-val">Due in 3 days</span></div><div class="k-glass-row"><span class="k-glass-num">3</span>Harbourlight<span class="k-glass-val">Overdue</span></div><button class="btn btn-pri btn-md" style="width:100%;margin-top:12px">Send reminder</button></div></div><div class="k-uc-scene" data-uc-scene hidden><div class="k-glass" data-theme="dark"><div class="k-glass-h">This week <span>Overview</span></div><div class="k-glass-row"><span class="k-glass-num">1</span>Revenue<span class="k-glass-val">$12,480</span></div><div class="k-glass-row"><span class="k-glass-num">2</span>Orders<span class="k-glass-val">312</span></div><div class="k-glass-row"><span class="k-glass-num">3</span>Refunds<span class="k-glass-val">4</span></div><div style="margin-top:12px"><div class="k-progress" data-tone="accent"><div class="k-progress-bar" style="width:68%"></div></div></div></div></div><div class="k-uc-scene" data-uc-scene hidden><div class="k-glass" data-theme="dark"><div class="k-glass-h">Month-end close <span>Checklist</span></div><div class="k-glass-row"><span class="k-glass-num">✓</span>Reconcile accounts<span class="k-glass-val">Done</span></div><div class="k-glass-row"><span class="k-glass-num">✓</span>Review exceptions<span class="k-glass-val">Done</span></div><div class="k-glass-row"><span class="k-glass-num">3</span>Export to ledger<span class="k-glass-val">Next</span></div></div></div><div class="k-uc-scene" data-uc-scene hidden><div class="k-glass" data-theme="dark"><div class="k-glass-h">Runway <span>At current burn</span></div><div style="padding:12px 0 2px"><b style="font-size:29px;font-weight:650;letter-spacing:-.02em">14.2</b> <span style="color:var(--k-ink-3);font-size:12.5px">months</span></div><div class="k-glass-row"><span class="k-glass-num">1</span>Burn / month<span class="k-glass-val">$38,200</span></div><div class="k-glass-row"><span class="k-glass-num">2</span>Cash<span class="k-glass-val">$542,000</span></div></div></div>
  </div>
</section>
.k-uc{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-family:var(--k-font);text-align:left;color:var(--k-ink);align-items:stretch}
@media (max-width:720px){.k-uc{grid-template-columns:1fr}}
.k-uc-list{border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);overflow:hidden}
.k-uc-row{width:100%;display:block;border:none;background:transparent;font:inherit;text-align:left;cursor:pointer;padding:0;color:var(--k-ink)}
.k-uc-row+.k-uc-row{border-top:1px solid var(--k-line)}
.k-uc-head{display:flex;align-items:center;gap:12px;padding:15px 17px}
.k-uc-head .no{font-family:var(--k-mono);font-size:11px;color:var(--k-ink-3)}
.k-uc-head .lb{font-size:14px;font-weight:550;flex:1}
.k-uc-head .pl{color:var(--k-ink-3);display:grid;place-items:center;transition:transform .2s var(--k-ease)}
.k-uc-row.open .pl{transform:rotate(45deg)}
.k-uc-body{display:none;padding:0 17px 17px 41px}
.k-uc-row.open .k-uc-body{display:block}
.k-uc-body h4{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.k-uc-body p{margin-top:6px;font-size:13px;line-height:1.75;color:var(--k-ink-2)}
.k-uc-body ul{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:6px;font-size:13px;color:var(--k-ink-2)}
.k-uc-body li{display:flex;gap:8px;align-items:center}
.k-uc-body li svg{color:var(--k-accent);flex:none}
.k-uc-stage{position:relative;border-radius:14px;overflow:hidden;min-height:320px}
.k-uc-stage .k-aurora{position:absolute;inset:0;border-radius:14px}
.k-uc-scene{position:absolute;inset:0;display:grid;place-items:center;padding:22px;animation:k-uc-in .45s var(--k-ease)}
.k-uc-scene[hidden]{display:none}
.k-uc-scene .k-glass{width:100%;max-width:300px}
@keyframes k-uc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.k-uc-scene{animation:none}}

const ucRows = [...document.querySelectorAll('[data-uc-row]')];
const ucScenes = [...document.querySelectorAll('[data-uc-scene]')];
ucRows.forEach((row, i) => {
  row.addEventListener('click', () => {
    ucRows.forEach((r, j) => {
      r.classList.toggle('open', j === i);
      r.setAttribute('aria-expanded', String(j === i));
    });
    ucScenes.forEach((sc, j) => { sc.hidden = j !== i; });
  });
});

Usage

For the "who is it for" section of a landing page. Each case pairs a promise on the left with its evidence on the right — a real screen fragment, not an illustration.

Previous
Testimonials