Templates / Inbox

Inbox beta

A mail client page in three panes: folders and labels, a message list with unread states, and a reading pane with a reply box — composed from KATA parts.

Preview

mail.acme.studio/inbox

Ren Sato09:24

Q4 roadmap draft

I folded in the notes from Tuesday — the launch window moved…

Mei Chen08:41

Invoice ORD-1040 is pending

The client asked to split the payment across two months…

Acme Reports07:15

Your weekly report is ready

Revenue is up 12.5% — the full breakdown is inside…

Jonas BergYesterday

Re: Landing page copy

Shorter headline works. One more pass on the sub-copy…

Priya NairYesterday

Design review moved to Friday

The client moved it — same agenda, new slot…

Q4 roadmap draft

Inbox

Ren Sato[email protected]

Today, 09:24

Hi Aoi — the Q4 roadmap draft is ready for your pass. I folded in the notes from Tuesday: the launch window moved to late November, and the pricing page work now sits ahead of the mobile pass.

Two things I need your eyes on: the empty-state illustrations (are they still honest at small sizes?) and the onboarding flow, which grew a fourth step while nobody was watching.

Comments are open in the doc. If the shape holds, I'll send it to the team on Friday.

— Ren

Built from: Parts: Avatar, Badge, Button, Input, Textarea, Separator — include their CSS alongside this template.

<div class="k-tpl3">
  <aside class="k-tpl3-rail">
    <button class="btn btn-pri k-tpl3-compose" type="button"><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="M12 5v14M5 12h14"/></svg> Compose</button>
    <nav class="k-tpl3-folders">
      <a href="#" class="on"><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"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg><span>Inbox</span><span class="badge teal">4</span></a>
      <a href="#"><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 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><span>Starred</span></a>
      <a href="#"><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="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z"/><path d="M14 3v5h5M9 13h6M9 17h6"/></svg><span>Drafts</span><span class="badge">2</span></a>
      <a href="#"><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="M4 7h16M9 7V4h6v3M6.5 7l1 12a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2l1-12"/><path d="M10 11.5v5.5M14 11.5v5.5"/></svg><span>Trash</span></a>
    </nav>
    <p class="k-tpl3-lbl">Labels</p>
    <div class="k-tpl3-labels">
      <span><i style="background:var(--k-accent)"></i>Clients</span>
      <span><i style="background:var(--k-zinc-400)"></i>Receipts</span>
      <span><i style="background:color-mix(in srgb,var(--k-accent) 40%,var(--k-ink))"></i>Travel</span>
    </div>
  </aside>
  <section class="k-tpl3-list">
    <div class="k-tpl3-lhead"><span class="k-tpl3-search"><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"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.5-4.5"/></svg><input class="input" type="search" placeholder="Search mail" aria-label="Search mail"></span></div>
    <div class="k-tpl3-msgs">
      <div class="k-tpl3-msg sel unread"><span class="k-avatar" data-size="sm">RS</span><div class="k-tpl3-mb"><div class="k-tpl3-mt"><b>Ren Sato</b><span>09:24</span></div><div class="k-tpl3-ms">Q4 roadmap draft</div><div class="k-tpl3-mp">I folded in the notes from Tuesday — the launch window moved…</div></div><span class="k-tpl3-dot"></span></div>
      <div class="k-tpl3-msg unread"><span class="k-avatar" data-size="sm">MC</span><div class="k-tpl3-mb"><div class="k-tpl3-mt"><b>Mei Chen</b><span>08:41</span></div><div class="k-tpl3-ms">Invoice ORD-1040 is pending</div><div class="k-tpl3-mp">The client asked to split the payment across two months…</div></div><span class="k-tpl3-dot"></span></div>
      <div class="k-tpl3-msg unread"><span class="k-avatar" data-size="sm">AR</span><div class="k-tpl3-mb"><div class="k-tpl3-mt"><b>Acme Reports</b><span>07:15</span></div><div class="k-tpl3-ms">Your weekly report is ready</div><div class="k-tpl3-mp">Revenue is up 12.5% — the full breakdown is inside…</div></div><span class="k-tpl3-dot"></span></div>
      <div class="k-tpl3-msg"><span class="k-avatar" data-size="sm">JB</span><div class="k-tpl3-mb"><div class="k-tpl3-mt"><b>Jonas Berg</b><span>Yesterday</span></div><div class="k-tpl3-ms">Re: Landing page copy</div><div class="k-tpl3-mp">Shorter headline works. One more pass on the sub-copy…</div></div></div>
      <div class="k-tpl3-msg"><span class="k-avatar" data-size="sm">PN</span><div class="k-tpl3-mb"><div class="k-tpl3-mt"><b>Priya Nair</b><span>Yesterday</span></div><div class="k-tpl3-ms">Design review moved to Friday</div><div class="k-tpl3-mp">The client moved it — same agenda, new slot…</div></div></div>
    </div>
  </section>
  <section class="k-tpl3-read">
    <div class="k-tpl3-rt"><h3>Q4 roadmap draft</h3><span class="badge">Inbox</span></div>
    <div class="k-tpl3-sender"><span class="k-avatar">RS</span><div class="k-tpl3-swho"><b>Ren Sato</b><span>[email protected]</span></div><span class="k-tpl3-time">Today, 09:24</span></div>
    <hr class="k-sep">
    <div class="k-tpl3-body">
      <p>Hi Aoi — the Q4 roadmap draft is ready for your pass. I folded in the notes from Tuesday: the launch window moved to late November, and the pricing page work now sits ahead of the mobile pass.</p>
      <p>Two things I need your eyes on: the empty-state illustrations (are they still honest at small sizes?) and the onboarding flow, which grew a fourth step while nobody was watching.</p>
      <p>Comments are open in the doc. If the shape holds, I'll send it to the team on Friday.</p>
      <p>— Ren</p>
    </div>
    <div class="k-tpl3-reply">
      <textarea class="k-textarea" rows="3" placeholder="Reply to Ren…" aria-label="Reply"></textarea>
      <div class="k-tpl3-ractions"><button class="btn btn-pri btn-sm" type="button">Send reply</button><button class="btn btn-ghost btn-sm" type="button">Discard</button></div>
    </div>
  </section>
</div>

.k-tpl3{display:grid;grid-template-columns:206px 322px 1fr;background:var(--k-bg);color:var(--k-ink);border:1px solid var(--k-line);border-radius:16px;overflow:hidden;min-height:660px;font-family:var(--k-font);text-align:left}
.k-tpl3-rail{padding:16px 12px;border-right:1px solid var(--k-line);background:var(--k-zinc-50);display:flex;flex-direction:column;gap:4px}
.k-tpl3-compose{width:100%;justify-content:center;margin-bottom:12px}
.k-tpl3-folders{display:grid;gap:2px}
.k-tpl3-folders a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;color:var(--k-ink-2);text-decoration:none;font-size:13.5px}
.k-tpl3-folders a>span:nth-child(2){flex:1}
.k-tpl3-folders a:hover{background:color-mix(in srgb,var(--k-ink) 5%,transparent);color:var(--k-ink)}
.k-tpl3-folders a.on{background:color-mix(in srgb,var(--k-ink) 7%,transparent);color:var(--k-ink);font-weight:550}
.k-tpl3-lbl{font-size:10.5px;letter-spacing:.09em;color:var(--k-ink-3);margin:16px 9px 6px;font-weight:600}
.k-tpl3-labels{display:grid;gap:7px;padding:0 9px;font-size:13px;color:var(--k-ink-2)}
.k-tpl3-labels span{display:flex;align-items:center;gap:8px}
.k-tpl3-labels i{width:8px;height:8px;border-radius:50%;display:block}
.k-tpl3-list{border-right:1px solid var(--k-line);display:flex;flex-direction:column;min-width:0}
.k-tpl3-lhead{padding:12px;border-bottom:1px solid var(--k-line)}
.k-tpl3-search{display:flex;align-items:center;gap:7px;color:var(--k-ink-3)}
.k-tpl3-search .input{flex:1;min-width:0}
.k-tpl3-msgs{display:flex;flex-direction:column}
.k-tpl3-msg{display:flex;gap:10px;padding:13px 14px;border-bottom:1px solid var(--k-line);cursor:pointer;position:relative}
.k-tpl3-msg:hover{background:color-mix(in srgb,var(--k-ink) 3%,transparent)}
.k-tpl3-msg.sel{background:color-mix(in srgb,var(--k-accent) 7%,transparent)}
.k-tpl3-mb{min-width:0;flex:1}
.k-tpl3-mt{display:flex;align-items:baseline;gap:8px}
.k-tpl3-mt b{font-size:13px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-tpl3-mt span{margin-left:auto;font-size:11px;color:var(--k-ink-3);flex:none}
.k-tpl3-ms{font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-tpl3-msg.unread .k-tpl3-ms{font-weight:600}
.k-tpl3-mp{font-size:12.5px;color:var(--k-ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-tpl3-dot{position:absolute;right:12px;bottom:14px;width:7px;height:7px;border-radius:50%;background:var(--k-accent)}
.k-tpl3-read{padding:22px 24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.k-tpl3-rt{display:flex;align-items:center;gap:10px}
.k-tpl3-rt h3{font-size:18px;font-weight:600;letter-spacing:-.015em}
.k-tpl3-sender{display:flex;align-items:center;gap:11px}
.k-tpl3-swho{display:grid;line-height:1.35}
.k-tpl3-swho b{font-size:13.5px;font-weight:550}
.k-tpl3-swho span{font-size:12px;color:var(--k-ink-3)}
.k-tpl3-time{margin-left:auto;font-size:12px;color:var(--k-ink-3)}
.k-tpl3-body{display:grid;gap:12px;font-size:14px;line-height:1.75;color:var(--k-ink)}
.k-tpl3-reply{margin-top:auto;display:grid;gap:9px}
.k-tpl3-ractions{display:flex;gap:8px}
@media (max-width:900px){.k-tpl3{grid-template-columns:206px 1fr}.k-tpl3-read{display:none}}
@media (max-width:560px){.k-tpl3{grid-template-columns:1fr}.k-tpl3-rail{display:none}}

Usage

Three panes, one page. The folder rail and the message rows are page glue; the avatars, badges, buttons, search input and reply textarea are catalog parts. Rows carry two states worth keeping when you wire real data: .sel for the open message and .unread for the bold subject and dot. Below 900px the reading pane steps aside, the way mail apps do.

Dashboard

Landing Page