Layouts · Content display
List View
Also called: List, Simple list, Item list, Vertical list
Stacks items of the same kind in one column from top to bottom. Each row has just an icon, a title and one or two bits of extra info. Good when items are simple and users need to scan and tap quickly.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstShow notifications as a simple list. Each item is one 64px-tall row: a 40px round icon on the left, a bold title and one line of gray summary in the middle (truncated with an ellipsis), and the time on the right. Separate items with a 1px light gray divider, show a small dot before the title of unread items, and make the whole row clickable to open the details. Don't make it a table or cards.
Send to
01Decide
Does your content look like this?
Check both columns to confirm List View is what you need.
Use List View when
- Items share the same structure and each has only two or three fields
- Users only need to scan quickly, spot what they want and click in to see it
- Showing multiple items of the same kind on a phone or in a narrow column
- Items are mostly text and don't rely on large images
Pick something else when
Each item has many fields that need column-by-column comparison
Use insteadData TableEach item is full content that users read and interact with right in the list
Use insteadFeedThe content is mostly images and users pick by looking at them
Use insteadCard Grid
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
Seven or eight fields crammed into each row, so it looks like a table without headers
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Row height and padding are too small, so rows are hard to tap on phones
- 03
Each item is just a one-line title, yet every one gets wrapped in a big card with a shadow
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
Items stacked in one column from top to bottom. Each row has an icon on the left, a title and description in the middle, and extra info or an action on the right, with dividers between rows.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A simple list is the lightest way to show multiple items. Each item takes one row: an icon or avatar on the left, a title and one line of gray description in the middle, and a time, an arrow or a small button on the right. Think notification lists, file lists, contacts and settings entries.
The difference from a Data Table is that it has fewer fields and they don't line up in columns. Each row in a list only has two or three pieces of info, and what users care about is "what is this item", not comparing one field across many records. So it's lighter than a table and works better on phones.
The difference from a Feed is that each item is short, has the same structure and is the same height. A row in a list is just an entry point, and you click it to see the details. Each item in a feed is the full content, which you can read, like and comment on right in the feed.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-list- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-list.arco-list.t-list.n-list.MuiList-root
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026