- ds
- Components
- List
List
Rows with an icon, two lines of text and actions.
Code
<ul class="list">
<li><a class="li" href="#"><span class="li-ico store"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg></span><span class="li-main"><b>acme-raw-ap-south-1</b><span>4.8M objects · 2.84 TB</span></span><span class="li-meta hide-sm">ap-south-1</span><svg class="i chev" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></a></li>
<li><a class="li" href="#"><span class="li-ico store"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 21V10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v11"/><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 1.132-1.803l7.95-3.974a2 2 0 0 1 1.837 0l7.948 3.974A2 2 0 0 1 22 8z"/><path d="M6 13h12"/><path d="M6 17h12"/></svg></span><span class="li-main"><b>analytics</b><span>Snowflake · 312 tables</span></span><span class="li-meta hide-sm">eu-west-1</span><svg class="i chev" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></a></li>
<li><a class="li" href="#"><span class="li-ico store"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg></span><span class="li-main"><b>orders-db</b><span>PostgreSQL 16 · read replica lagging 4 s</span></span><span class="li-meta hide-sm">ap-south-1</span><svg class="i chev" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></a></li>
<li><a class="li" href="#"><span class="li-ico"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12q2.5 2 5 0t5 0 5 0 5 0"/><path d="M2 19q2.5 2 5 0t5 0 5 0 5 0"/><path d="M2 5q2.5 2 5 0t5 0 5 0 5 0"/></svg></span><span class="li-main"><b>events</b><span>Kafka · 48 partitions</span></span><span class="li-meta hide-sm">ap-south-1</span><svg class="i chev" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></a></li>
</ul>Rows with an icon tile, a name and a line under it, metadata in mono and a chevron when the row goes somewhere. The whole row is the link. Storage resources get an amber icon, the same rule as diagrams: amber is data at rest.
With actions
- PKPriya Kulkarnipriya@acme.devOwner
- SKSameer Khansameer@acme.devEditor
- ?dana@contractor.ioInvited 2 days ago, not accepted
Code
<ul class="list">
<li class="li"><span class="avatar t-teal">PK</span><span class="li-main"><b>Priya Kulkarni</b><span>priya@acme.dev</span></span><span class="badge accent">Owner</span><div class="btn-row"><button class="btn icon xs ghost" aria-label="More for Priya"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></div></li>
<li class="li"><span class="avatar t-amber">SK</span><span class="li-main"><b>Sameer Khan</b><span>sameer@acme.dev</span></span><span class="badge">Editor</span><div class="btn-row"><button class="btn icon xs ghost" aria-label="More for Sameer"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></div></li>
<li class="li"><span class="avatar ghost">?</span><span class="li-main"><b>dana@contractor.io</b><span>Invited 2 days ago, not accepted</span></span><div class="btn-row"><button class="btn xs ghost">Resend</button><button class="btn xs ghost danger">Revoke</button></div></li>
</ul>Selectable, flush
Code
<ul class="list flush sm" role="listbox" aria-label="Notebooks">
<li><button class="li" role="option" aria-selected="false"><span class="li-ico"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4"/><path d="M2 6h4"/><path d="M2 10h4"/><path d="M2 14h4"/><path d="M2 18h4"/><path d="M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/></svg></span><span class="li-main"><b>Churn by cohort</b><span class="mono">edited 4 min ago</span></span></button></li>
<li><button class="li" role="option" aria-selected="true"><span class="li-ico"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4"/><path d="M2 6h4"/><path d="M2 10h4"/><path d="M2 14h4"/><path d="M2 18h4"/><path d="M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/></svg></span><span class="li-main"><b>Refund spike, Oct 9</b><span class="mono">edited 1 h ago</span></span></button></li>
<li><button class="li" role="option" aria-selected="false"><span class="li-ico"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4"/><path d="M2 6h4"/><path d="M2 10h4"/><path d="M2 14h4"/><path d="M2 18h4"/><path d="M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/></svg></span><span class="li-main"><b>Warehouse cost, Q3</b><span class="mono">edited yesterday</span></span></button></li>
</ul>.flush drops the box for lists inside a panel. The selected row gets the same accent bar as the command palette.
API
| Class | On | What it does |
|---|---|---|
.list | ul | A bordered list with hairlines between rows. .flush without the box, .sm tighter. |
.li | li, a, button | A row. As a link or button the whole row is clickable. |
.li-ico | span | A 2rem icon tile. .store makes the icon amber. |
.li-main | span | Name in <b>, a second line in <span>. Both truncate. |
.li-meta | span | Mono metadata on the right. .hide-sm hides it on phones. |
.chev | svg | The chevron for rows that navigate. |
aria-selected="true" | .li | The selected row. |
Do
- Lists for things with a name; tables when people compare values across rows.
- One primary target per row.
- Put the thing that differs first in the second line.
Don't
- Links and buttons nested inside a row that is itself a link.
- Icons that are all the same: drop them.
- More than two lines per row.
Accessibility
- If the row is a link, put actions outside it, as in the members list, so nothing interactive is nested.
- Icon-only action buttons need a label that names the row: "More for Priya".