List
列表
A single column of stacked items, where every row is the same kind of thing and the whole row is one target.
Live Demo
Actually clickableWhat you just saw:A WeChat conversation list, the rows inside Settings, the mail list on iOS — avatar on the left, title in the middle, timestamp on the right.
What it actually is
A list is the base unit of information display. The two decisions that matter are how much goes in one row and which rows are tappable. When a row is tappable, the entire row needs hover feedback and a full-row hit area.
Anatomy · What it's made of
Row / Item列表行
Minimum 48px hit area, the whole row is tappable
Leading前导
Avatar / icon
Title主标题
Truncated to one line
Subtitle副标题
Secondary color, one line
Trailing尾部
Value / timestamp / chevron
Divider分隔线
Aligned to the text, not full-bleed
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Three or more similar items need vertical browsing | Yes |
| Every item has the same structure (title + subtitle + value) | Yes |
| Users need to scan quickly | Yes |
| Users need to compare values horizontally across items | No |
| There are only one or two items | Depends |
Once a row carries five fields it has become a table — use a Table for horizontal comparison.
Rows need a divider or vertical whitespace between them, otherwise they smear into one block.
Similar Patterns
Don't mix these upListCurrent
列表
A single column of stacked items, where every row is the same kind of thing and the whole row is one target.
Table
表格
Rows and columns that cross, used to compare several attributes across several objects side by side.
In one line:A single column of stacked items, where every row is the same kind of thing and the whole row is one target.
Table
表格
Rows and columns that cross, used to compare several attributes across several objects side by side.
Card
卡片
A rounded, bordered container that bundles one related piece of content — image, title, text — into a single self-contained unit.
Timeline
时间线
A single line of events in chronological order, newest at the top.
List
列表
A single column of stacked items, where every row is the same kind of thing and the whole row is one target.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a settings list: each row has a leading icon + title on the left, the current value + chevron on the right, the whole row is tappable, rows are separated by hairlines, and groups are separated by section headers.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a list to show the data.
Say this instead
Add a settings List: wrap each row in a button so the whole row is tappable, height >=48px, leading icon + title on the left, value + chevron on the right, dividers aligned to the text rather than full-bleed, and groups separated by headings plus spacing instead of dividers.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.