Layouts / List layoutOpen in Figma
List layout
ReadyFor any screen whose job is to find one record among many.
Two versions
| Version | Use | Items |
|---|---|---|
| Default | Every list screen unless the brief asks otherwise | Request cards, 16 apart |
| Search bar version | Only when asked for | List cards, 12 apart |
Default
14Tab one
8Tab two
3Tab three
Counttune
categoryCategory!
Description
attach_file6imagecurrency_rupee_circleAmount
paceStatusTime
categoryCategory!
Description
attach_file6imagecurrency_rupee_circleAmount
paceStatusTime
categoryCategory!
Description
attach_file6imagecurrency_rupee_circleAmount
paceStatusTime
| Region | Holds | Required | |
|---|---|---|---|
| 1 | Title bar | Back, screen title, search and up to two icon actions | Yes |
| 2 | Primary tabs | Count tabs that split the list by status | No |
| 3 | Count and filter | Item count, filter icon | Yes |
| 4 | Items | Request cards | Yes |
| 5 | Add button | Creates a new item | When people can add |
Search bar version, when asked
14Tab one
8Tab two
3Tab three
Counttune
Record numberStatus
AB
Name
Detail
Record numberStatus
AB
Name
Detail
Record numberStatus
AB
Name
Detail
| Region | Holds | Required | |
|---|---|---|---|
| 1 | Title bar | Back, screen title, up to two icon actions | Yes |
| 2 | Primary tabs or chips | One way of splitting the list | No |
| 3 | Count and filter | Item count, filter button | Yes |
| 4 | Items | List cards | Yes |
| 5 | Add button | Creates a new item | When people can add |
Spacing
| Between | Phone | Tablet |
|---|---|---|
| Screen edge and content | 16 | 20 |
| Items, default | 16 | 16 |
| Items, search bar version | 12 | 12 |
| Count line and first item | 16 | 16 |
| Add button and screen edge | 24, above navigation | Pill, 24 from the right |
Rules
- Start every list screen from the default version; use the search bar version only when the brief asks for it.
- One kind of item per list.
- The splitting control holds one idea: status, owner or type, never a mix.
- An empty list shows one line of text in the middle; the add button stays.
- On tablet, choosing an item opens it beside the list. See Tablet split.