Lists
A list is a stack of rows that share one shape: a leading icon or avatar, a title, sometimes a line of description, and one thing on the trailing edge: usually broken into groups under their own labels. It is the densest way to present items that are alike enough to compare at a glance but not uniform enough to put in columns.
That trailing edge is where lists go wrong. A chevron means this row takes you somewhere, a switch means this row changes something right here, and a time means the row is only telling you a fact. Mix them inside one group and every row becomes a guess. Keep one kind per group, and if a group has to end in a destructive row, put it last and colour it, so nobody reaches it on the way to something else. Group labels earn their keep too: a few headings turn a scroll into a lookup.
Settings list
Best for
Account and workspace settings: grouped rows a person scans once
Anatomy
Dark Content Label header · General and Advanced group labels, inset differently · icon-chip rows with a chevron or a Switch · dashed rules · a destructive row in Error red
Workspace settings
Manage your profile, team and preferences
General
Advanced
Feature list
Best for
Pricing and upgrade pages: what a plan buys, three rows at a time
Anatomy
Pro plan badge with a trailing star · a 300px header column that forces both wraps · Small list items · a Learn more link lined up with the text column · dashed full-bleed rules
Everything your team needs to move faster
One workspace for planning, building and shipping, with the depth larger teams need.
Inbox list
Best for
Notification inboxes: a morning of activity behind three tabs
Anatomy
Unbox title with Mark all as read · a pill tab track that really filters · icon-chip and avatar rows · unread dot badges · a right-aligned time run · solid full-bleed rules
Unbox
Getting-started checklist
Best for
First-run setup and daily task lists
Anatomy
Count and progress · a card per task with its check · note line · Normal, Pending or Done tag
Using Lists
Reach for it when
- Settings grouped under headings, each row its own destination or switch
- Inboxes where every row carries read state and a timestamp
- Short claims read in sequence, like what a plan includes
- Narrow screens, where a full-width row beats a line of links
Reach for something else when
- Records compared field by field: a table gives them columns
- Items with a photo and several unlike stats: a card holds those without cramping them
- A hierarchy people expand and collapse: a tree view shows the depth
Where it shows up
Account settings screens
Grouped rows under their own headings, each with an icon chip and either a chevron out to a detail screen or a switch that changes the thing right there, with the dangerous row last.
Notification inbox
Rows carrying an avatar or a glyph, a line saying what happened, an unread dot and a time on the right, filtered by a tab track, with one control that marks the lot as read.
What a plan includes
An upgrade page written as short rows beside a heading column, each one a claim a reader can check off, ending in a link out to the detail rather than a paragraph of it.
Menus on narrow screens
A full-width row is a far bigger target than a link in a paragraph, and the leading icon gives the eye something to aim at when the labels are all much the same length.
Questions
What is the difference between a list and a table?
A list is one column of rows that share a shape; a table is a grid of values that share columns. Reach for a table when the reader's job is to compare the same field across many records, sort by it, or scan down one column. Reach for a list when each row is read whole and its fields are not really comparable.
Should a list row be a link or a button?
If the row goes somewhere, make it a link, so it can be opened in a new tab, copied, and read as a destination. If it acts on the spot, make it a button. If the row carries a switch, the row itself should not be clickable at all, or the switch and the row will fight over the same press.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPLists
A list is a stack of rows that share one shape: a leading icon or avatar, a title, sometimes a line of description, and one thing on the trailing edge: usually broken into groups under their own labels. It is the densest way to present items that are alike enough to compare at a glance but not uniform enough to put in columns.
That trailing edge is where lists go wrong. A chevron means this row takes you somewhere, a switch means this row changes something right here, and a time means the row is only telling you a fact. Mix them inside one group and every row becomes a guess. Keep one kind per group, and if a group has to end in a destructive row, put it last and colour it, so nobody reaches it on the way to something else. Group labels earn their keep too: a few headings turn a scroll into a lookup.
Settings list
Best for
Account and workspace settings: grouped rows a person scans once
Anatomy
Dark Content Label header · General and Advanced group labels, inset differently · icon-chip rows with a chevron or a Switch · dashed rules · a destructive row in Error red
Workspace settings
Manage your profile, team and preferences
General
Advanced
Feature list
Best for
Pricing and upgrade pages: what a plan buys, three rows at a time
Anatomy
Pro plan badge with a trailing star · a 300px header column that forces both wraps · Small list items · a Learn more link lined up with the text column · dashed full-bleed rules
Everything your team needs to move faster
One workspace for planning, building and shipping, with the depth larger teams need.
Inbox list
Best for
Notification inboxes: a morning of activity behind three tabs
Anatomy
Unbox title with Mark all as read · a pill tab track that really filters · icon-chip and avatar rows · unread dot badges · a right-aligned time run · solid full-bleed rules
Unbox
Getting-started checklist
Best for
First-run setup and daily task lists
Anatomy
Count and progress · a card per task with its check · note line · Normal, Pending or Done tag
Using Lists
Reach for it when
- Settings grouped under headings, each row its own destination or switch
- Inboxes where every row carries read state and a timestamp
- Short claims read in sequence, like what a plan includes
- Narrow screens, where a full-width row beats a line of links
Reach for something else when
- Records compared field by field: a table gives them columns
- Items with a photo and several unlike stats: a card holds those without cramping them
- A hierarchy people expand and collapse: a tree view shows the depth
Where it shows up
Account settings screens
Grouped rows under their own headings, each with an icon chip and either a chevron out to a detail screen or a switch that changes the thing right there, with the dangerous row last.
Notification inbox
Rows carrying an avatar or a glyph, a line saying what happened, an unread dot and a time on the right, filtered by a tab track, with one control that marks the lot as read.
What a plan includes
An upgrade page written as short rows beside a heading column, each one a claim a reader can check off, ending in a link out to the detail rather than a paragraph of it.
Menus on narrow screens
A full-width row is a far bigger target than a link in a paragraph, and the leading icon gives the eye something to aim at when the labels are all much the same length.
Questions
What is the difference between a list and a table?
A list is one column of rows that share a shape; a table is a grid of values that share columns. Reach for a table when the reader's job is to compare the same field across many records, sort by it, or scan down one column. Reach for a list when each row is read whole and its fields are not really comparable.
Should a list row be a link or a button?
If the row goes somewhere, make it a link, so it can be opened in a new tab, copied, and read as a destination. If it acts on the spot, make it a button. If the row carries a switch, the row itself should not be clickable at all, or the switch and the row will fight over the same press.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
