Layouts / List layoutOpen in Figma
List layout
ReadyFor any screen whose job is to find one record among many.
Regions
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 or request cards, one kind per list | Yes |
| 5 | Add button | Creates a new item | When people can add |
Spacing
| Between | Phone | Tablet |
|---|---|---|
| Screen edge and content | 16 | 20 |
| Items | 12 | 12 |
| Count line and first item | 16 | 16 |
| Add button and screen edge | 24, above navigation | Pill, 24 from the right |
Rules
- 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.