UI components · Data display
List
Also called: List view, Item list, List group
Stacks items vertically one after another, each usually a title plus a line or two of description. Good for browsing one by one and clicking into details.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstBuild a notifications list where each item is 64px tall. On the left, a 40px round avatar. In the middle, a bold title on the top line and a single-line gray summary below, truncated with an ellipsis. On the right, the relative time. Unread items have a small dot before the title. Separate items with thin light gray lines, give them a light gray background on hover, open the detail on click, and put a "Load more" button at the bottom.
Send to
01Decide
Does your content look like this?
Check both columns to confirm List is what you need.
Use List when
- Items with just a title and a line or two of description that users browse top to bottom, like messages, notifications, or comments
- Lots of items that need to fit compactly, with as many as possible on one screen
- Items that open a detail view on click, so the list itself only needs to show key info
- Showing many records on narrow screens like phones
Pick something else when
Uniform items with many fields that need comparing or sorting by column
Use insteadTableA single record where you need to show all of its fields
Use insteadDescription List
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Squeezing seven or eight fields into one line separated by spaces, when it should really be a table
- 02
No dividers or spacing between list items, so the text runs together and you can't tell where one ends
- 03
Making every list item a card with a big shadow, which wastes space and fits only two or three per screen
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
Vertically stacked list items. Each item usually has a leading icon or avatar, a title, description text, and extra info or actions on the right.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A list stacks items in a single column, each taking one or a few lines. A common layout is an icon or avatar on the left, a title and a line of description in the middle, and a time, arrow, or action button on the right. Messages, notifications, comments, file lists, and settings items all fall into this category.
The difference between a list and a table is the number of fields and the purpose. A list shows only a little key info per item and is about browsing top to bottom and clicking in for details. A table lines up many fields in columns and is about comparing across rows and handling items in bulk. The difference between a list and cards is density. A list is compact, so you can see many items on one screen. Cards take more space and suit image-heavy content.
With lots of items, lists are often paired with pagination, infinite scroll, or a "Load more" button.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-list- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
ul:not(nav ul, header ul, footer ul, article ul, li ul, [role]):has(> li + li + li)[role="list"].list-group.ant-list[class*="MuiList-root"]:not([role="menu"]).arco-list.t-list.n-list
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026