A table wins when people scan the same field across rows, like amounts or dates in a column. A list wins when the primary read is down the page, like an inbox or a settings screen, and each row mixes icon, title, subtitle and trailing meta in one band.

Should the whole row be clickable?

Yes, when the row opens a detail view or selects an item in a master-detail layout. One button or link wrapping the row beats three separate hit targets that fight each other. Put secondary actions in a menu at the trailing edge, not as a second full-row link.

How do I show unread or selected rows?

Selected rows get a background fill and often a weight change on the title. Unread rows get a dot or bolder title on the leading edge. Pair colour with weight or position so state is not colour alone (WCAG 1.4.1).

What goes on the trailing edge?

Short meta: a time, a count, a badge, a chevron. Keep it one line. If the trailing content needs a sentence, the row is probably a card.

Can lists have section headers?

Yes. Sticky section labels above a group of rows work well in settings and mail clients. The header is not a row: it does not click and it does not sit in the tab order.

How tall should a row be?

Between 44 and 56px for a single-line title with meta, which meets WCAG 2.5.8 target size when the whole row is the target. Two-line subtitles push height to around 64px. Do not go below 44px on touch screens.

List

A list is a vertical stack of rows, each row one object. It carries more context per item than a table column allows, without the weight of a full card grid.

Structure and navigationBuild difficulty: Easy<ul>

Also called Row list, Item list, Stacked list.

inv

Detail for the row you picked.

Click a row: the panel updates and the selected row is marked. Unread rows carry a dot on the left. Tab moves through the list one row at a time.

For designers

A list is the default pattern for master-detail layouts: mail, chat, file pickers, settings. Each row is scannable in one glance because the leading graphic, title, subtitle and trailing meta sit on one horizontal band.

The cost is density. Past twenty rows without search or filters, a plain list becomes a scroll marathon. Add sectioning, search or a filter strip before the list grows past what someone will manually scan.

Mail clients are the reference implementation. Leading unread dot, avatar or icon, subject and preview line, trailing time. The pattern is decades old because it still fits how people triage: scan down, pick one row, act, return to the list. A table with Subject and Received columns shows the same data with more chrome.

Use a list when

Each row is one object with a title, a subtitle and maybe a trailing status
Roughly 5 to 20 items fit on screen without needing sortable columns
People pick one row to open a detail view beside or below the list

Reach for something else when

People need to compare numbers across many columns at once. Use a table instead.
Each item needs a photo, actions and a paragraph of body copy. Use a card grid instead.
The rows nest inside folders that open and close. Use a tree instead.

Variants

MBMurat BayralDesign lead2h
Invoice INV-1042Overdue
Export settings

Three row shapes: avatar and meta, icon and badge, and a compact row with only text.

With avatar. Face on the left, name and subtitle in the middle, time on the right. The inbox pattern.

With icon. A rounded square icon when the row is an object, not a person.

Compact. One line, trailing chevron or icon. Settings menus and export pickers.

How to build a list

Use a list element for the stack and one interactive element per row when the row navigates or selects.

<ul aria-label="Inbox">
  <li>
    <button type="button" aria-current="true">
      <span class="title">Invoice INV-1042</span>
      <span class="meta">Due Friday</span>
    </button>
  </li>
  <li>
    <button type="button">
      <span class="title">Lena Cho</span>
      <span class="meta">Updated the brief</span>
    </button>
  </li>
</ul>

Tab visits each row button in order. Arrow keys are optional: some master-detail lists add Up and Down to move selection without tabbing through every row, but native list behaviour without arrow handling is still correct.

Align leading icons and avatars to a fixed width so titles start on the same vertical line down the whole list. Trailing meta should truncate before it collides with the title, usually with max-width and ellipsis on the shorter field.

Sticky selection matters in master-detail layouts. When someone picks row four, scrolls the detail panel, then looks back at the list, the selected row should still be visible or scrolled into view. Losing selection on scroll is a small bug that feels like the app forgot what they opened.

Edge cases

Empty list. Show an empty state component instead of a blank white box. Say what would appear here and how to add the first item.

Loading. Skeleton rows that match the real row height, not a single centred spinner that collapses when data arrives.

Actions on the row. One overflow menu per row beats three icon buttons that shrink the title area on narrow screens.

Section headers. Sticky group labels belong outside the interactive list. Clicking a header should never toggle a row beneath it by accident.

Common questions

List or table?: A table wins when people scan the same field across rows, like amounts or dates in a column. A list wins when the primary read is down the page, like an inbox or a settings screen, and each row mixes icon, title, subtitle and trailing meta in one band.
Should the whole row be clickable?: Yes, when the row opens a detail view or selects an item in a master-detail layout. One button or link wrapping the row beats three separate hit targets that fight each other. Put secondary actions in a menu at the trailing edge, not as a second full-row link.
How do I show unread or selected rows?: Selected rows get a background fill and often a weight change on the title. Unread rows get a dot or bolder title on the leading edge. Pair colour with weight or position so state is not colour alone (WCAG 1.4.1).
What goes on the trailing edge?: Short meta: a time, a count, a badge, a chevron. Keep it one line. If the trailing content needs a sentence, the row is probably a card.
Can lists have section headers?: Yes. Sticky section labels above a group of rows work well in settings and mail clients. The header is not a row: it does not click and it does not sit in the tab order.
How tall should a row be?: Between 44 and 56px for a single-line title with meta, which meets WCAG 2.5.8 target size when the whole row is the target. Two-line subtitles push height to around 64px. Do not go below 44px on touch screens.

Last reviewed 26 AUG 2026