List group

data-list

A <ul data-list> is a bordered list of rows. Each row holds a <span> of a name and its meta on the left, and one thing on the right: a chip, a button or a time.

Basic

StandupEvery weekday, ten minutes09:45
hummingbird design reviewToday, with Priya and Carl11:00
ledger release windowToday, then on call until six16:30
Team retroMonday, forty minutes

html

<ul data-list>
  <li><span><strong>Standup</strong><small>Every weekday, ten minutes</small></span><mark>09:45</mark></li>
  <li><span><strong>hummingbird design review</strong><small>Today, with Priya and Carl</small></span><mark data-tone="info">11:00</mark></li>
  <li><span><strong>ledger release window</strong><small>Today, then on call until six</small></span><mark data-tone="go">16:30</mark></li>
  <li><span><strong>Team retro</strong><small>Monday, forty minutes</small></span><button data-variant="line" data-size="sm">Add a topic</button></li>
</ul>

The <small> inside the span loses its uppercase, because it is a second line of text rather than a label.

Notes

Rows are divided by a hairline and the last one has none, so the border of the list closes it.
An <li> holding only an <a> makes the whole row a link without underlining it.
<ol data-list> works the same way and keeps the list semantics for an ordered set.
Items hidden by a filter are set to display: none, so data-filter can point at a list group.