Components / Display & Media / List
List beta
Rows of like things: a face or an icon, a title, a whisper of meta, and somewhere to go.
<ul class="k-list" style="max-width:430px"> <li><a class="k-list-row" href="#"><span class="main"><span class="tt">Q3-board-deck.pdf</span><span class="ss">Shared by Aoi Kimura</span></span><span class="meta">2h ago</span><span class="chev"><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="m9 6 6 6-6 6"/></svg></span></a></li> <li><a class="k-list-row" href="#"><span class="main"><span class="tt">invoice-1042.pdf</span><span class="ss">Shared by Ren Sato</span></span><span class="meta">Yesterday</span><span class="chev"><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="m9 6 6 6-6 6"/></svg></span></a></li> <li><a class="k-list-row" href="#"><span class="main"><span class="tt">brand-assets.zip</span><span class="ss">Shared by Mei Chen</span></span><span class="meta">Mon</span><span class="chev"><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="m9 6 6 6-6 6"/></svg></span></a></li> </ul>
.k-list{list-style:none;margin:0;padding:0;border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);font-family:var(--k-font);overflow:hidden;text-align:left}
.k-list li+li{border-top:1px solid var(--k-line)}
.k-list-row{display:flex;align-items:center;gap:12px;padding:12px 15px;text-decoration:none;color:var(--k-ink)}
a.k-list-row:hover{background:var(--k-bg-soft)}
.k-list-row .main{flex:1;min-width:0}
.k-list-row .tt{font-size:13.5px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-list-row .ss{font-size:12px;color:var(--k-ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-list-row .meta{font-size:12px;color:var(--k-ink-3);flex:none}
.k-list-row .chev{color:var(--k-ink-3);flex:none;display:grid;place-items:center}
Usage
For indexes, member lists, file lists — anywhere the same row shape repeats. If rows need sorting or filtering, that is the Data Table pattern, not this part.
Accessibility
A real list element underneath. Rows that navigate are links; rows that act are buttons — never a clickable div.
Related parts
Aspect Ratio beta
A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.
Avatar beta
Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.
Bar Chart beta
Columns for comparing a handful of values — the chart people read correctly at a glance.
Card beta
The universal container: a hairline box with a header, a body and a footer that agree with each other.