USER INTERFACE · LISTS

List groups

Rows of related items — from a plain list to selectable, draggable and swipeable ones. Everything works.
THEME
DENSITY
01

Playground

Build your list — compare with the default
PREVIEWpick several · 2 selected4 differences
  • ⋮⋮ ✓ Olivia LaneProducer · Online Online Active ›
  • ⋮⋮ Alex ReyesPhotographer · On set On set Busy ›
  • ⋮⋮ ✓ Sara OrtizArt director · Away Away Review ›
  • ⋮⋮ Jon ReyesPhotographer · Offline Offline Done ›
  • ⋮⋮ Ana PetitRetoucher · Online Online Active ›
Settings
STYLE
default: Boxed
TEXT
default: With subtitle
LEADING
default: Icon
TRAILING
default: Chevron
BEHAVIOUR
default: Clickable
DIFF FROM DEFAULT
~ style: Boxed → Separated~ lead: Icon → Avatar~ trail: Chevron → Badge~ beh: Clickable → Multi select
02

Variants

Boxed, separated, flush, inset
Boxedone box · dividers
  • ⋮⋮ ▤ Brief.pdf2.4 MB ›
  • ⋮⋮ ▦ Moodboard18 images ›
  • ⋮⋮ ☰ Call sheetUpdated today ›
  • ⋮⋮ € Budget.xlsx€38,600 ›
  • ⋮⋮ ✓ ContractSigned ›
Separatedcard per row · gap 6
  • ⋮⋮ ▤ Brief.pdf2.4 MB ›
  • ⋮⋮ ▦ Moodboard18 images ›
  • ⋮⋮ ☰ Call sheetUpdated today ›
  • ⋮⋮ € Budget.xlsx€38,600 ›
  • ⋮⋮ ✓ ContractSigned ›
Flushlines only
  • ⋮⋮ ▤ Brief.pdf2.4 MB ›
  • ⋮⋮ ▦ Moodboard18 images ›
  • ⋮⋮ ☰ Call sheetUpdated today ›
  • ⋮⋮ € Budget.xlsx€38,600 ›
  • ⋮⋮ ✓ ContractSigned ›
Insettinted · rounded rows
  • ⋮⋮ ▤ Brief.pdf2.4 MB ›
  • ⋮⋮ ▦ Moodboard18 images ›
  • ⋮⋮ ☰ Call sheetUpdated today ›
  • ⋮⋮ € Budget.xlsx€38,600 ›
  • ⋮⋮ ✓ ContractSigned ›
03

Interactive

Select, reorder, swipe, expand, group
Single selectradio · like settings
Invoices will be issued in EUR
Multi selectcheckboxes · Select all
2 of 5 selected
  • ⋮⋮ Hero 01 24 MB ›
  • ⋮⋮ ✓ Hero 02 22 MB ›
  • ⋮⋮ Coast selects 410 MB ›
  • ⋮⋮ ✓ BTS cut 1.2 GB ›
  • ⋮⋮ Moodboard 8 MB ›
Reorderdrag ⋮⋮
  • ⋮⋮ Pre-productionPhase 1 ›
  • ⋮⋮ Shoot · Day 1Phase 2 ›
  • ⋮⋮ Shoot · Day 2Phase 3 ›
  • ⋮⋮ RetouchPhase 4 ›
  • ⋮⋮ DeliveryPhase 5 ›
Order: Pre-production → Shoot → Shoot → Retouch → Delivery
Swipe actions← delete · → archive · Undo
✓ ARCHIVEDELETE 🗑
Lena HolmCan we add 4 frames?⇠ swipe ⇢
✓ ARCHIVEDELETE 🗑
Jonas BergApproved the lookbook⇠ swipe ⇢
✓ ARCHIVEDELETE 🗑
Marco RuizInvoice question⇠ swipe ⇢
✓ ARCHIVEDELETE 🗑
Mia HoffNew retainer brief⇠ swipe ⇢
Expandable rowsdetails under the row
⋮⋮ € AV-041 · Nordic Thread €19,718 ›
Shoot days · 2€8,400Retouching · 24€4,320Licence€1,250
⋮⋮ € AV-040 · Kaya Ceramics €9,840 ›
Design system€4,200Product pages€2,700
⋮⋮ € AV-039 · Fjord Outdoor €5,210 ›
Deposit · 30 %€5,210
Grouped · sticky headersscroll inside
TODAY3
⋮⋮ @ Lena commented on Hero 04 10:42 ›
⋮⋮ ↑ Ana uploaded 12 files 09:15 ›
⋮⋮ € Deposit paid · €11,580 08:02 ›
YESTERDAY3
⋮⋮ ◷ Shoot day 2 wrapped 18:40 ›
⋮⋮ ☰ Call sheet v2 sent 14:10 ›
⋮⋮ ✓ Jonas approved selects 11:05 ›
EARLIER3
⋮⋮ ✎ Contract signed Oct 12 ›
⋮⋮ ◆ Kick-off call Oct 10 ›
⋮⋮ + Project created Oct 8 ›
04

Rich rows

People, files, tasks, settings
Peopleavatar · role · status · load
  • ⋮⋮ Olivia LaneProducer · 60% booked Online ›
  • ⋮⋮ Alex ReyesPhotographer · 82% booked On set ›
  • ⋮⋮ Jon ReyesPhotographer · 108% booked Busy ›
  • ⋮⋮ Ana PetitRetoucher · 30% booked Offline ›
Filesthumb · size · upload progress
  • ⋮⋮ JPG myvatn_hero_04.jpg24 MB ›
  • ⋮⋮ MP4 bts_roughcut.mp41.2 GB · waiting ›
  • ⋮⋮ LUT grade_lut.cube2 MB ›
Taskscheck · due · owner
1 of 4 done
Settingsicon · description · switch / ›
  • ⋮⋮ 🔔 NotificationsEmail and push for mentions ›
  • ⋮⋮ 🔒 Two-factorAuthenticator app ›
  • ⋮⋮ ✦ Beta featuresTry new things first ›
  • ⋮⋮ 🌐 LanguageEnglish ›
  • ⋮⋮ € BillingStudio · 6 seats ›
05

In Avava

Up next, inbox, invoices, clients
Up nextcalendar · today
  • ⋮⋮ 11 Fjord — lookbook selects11:00 · Google Meet · 1 h Now ›
  • ⋮⋮ 13 Portfolio review13:30 · Room 2 · 1 h 30 ›
  • ⋮⋮ 16 Kaya — website sign-off16:00 · Studio A · 1 h ›
Inboxunread · click to read
2 unread
  • ⋮⋮ Lena HolmCan we add 4 more frames to the print set? 2m ›
  • ⋮⋮ Jonas BergApproved — go ahead with retouch 1h ›
  • ⋮⋮ Marco RuizQuick question about AV-040 3h ›
  • ⋮⋮ Sara OrtizMoodboard v3 is up Yesterday ›
Recent invoicesamount · status
  • ⋮⋮ Nordic ThreadAV-041 €19,718 Overdue ›
  • ⋮⋮ Fjord OutdoorAV-042 €5,210 Sent ›
  • ⋮⋮ Kaya CeramicsAV-039 €9,840 Paid ›
  • ⋮⋮ Lumen CoffeeAV-043 €2,017 Draft ›
Clientssearch · empty state
  • ⋮⋮ NT Nordic ThreadOslo · 3 deals ›
  • ⋮⋮ FO Fjord OutdoorBergen · 4 deals ›
  • ⋮⋮ KC Kaya CeramicsValencia · 2 deals ›
  • ⋮⋮ LC Lumen CoffeeHamburg · 6 deals ›
  • ⋮⋮ MO Mira OpticsStockholm · 1 deal ›
06

States & a11y

Loading, empty, error, keyboard
Loadingskeleton rows
Emptyicon · line · action
☰No tasks yetTasks you create or are assigned show up here.
Errorretry
Couldn’t load the list
Selected & disabled
  • ⋮⋮ ✓ Selected rowaria-selected="true" Selected ›
  • ⋮⋮ Normal rowhover tint ›
  • ⋮⋮ Disabled rowopacity .45 · not focusable ›
Keyboardclick the list, then ↑ ↓ Space Enter
⋮⋮ Draft ›
⋮⋮ Sent ›
⋮⋮ Viewed ›
⋮⋮ Paid ›
⋮⋮ Overdue ›
Active: Draft
Attributes
Plain list<ul role="list"> <li>…</li>
Selectablerole="listbox" aria-multiselectable · role="option" aria-selected
Radio listrole="radiogroup" · aria-checked
Reorderdrag handle + keyboard: Alt+↑ / Alt+↓
Countaria-setsize / aria-posinset for virtual lists
List groupOne column of similar things you scan top to bottom.Inbox, team, settings
TableMany columns you compare across rows.Invoices, transactions
CardsVisual items, each a small object.Projects, files with previews
DO✓Put the most important text first, meta on the right✓Make the whole row clickable, not just the chevron✓Use one style per list✓Show progress and status inline✓Keep swipe actions undoable
DON’T✕Mix single and multi select in one list✕Hide destructive swipe without Undo✕Use a list for data you need to compare — use a table✕Put more than two trailing elements✕Make rows shorter than 44 px on touch