The page that lists one kind of record: jobs, invoices, customers, the catalog. It's built from the components below, arranged by patterns/list-page.css, and described page by page with the list recipe, so a new list is a description, not new code. The frames are the live example: try a status card, a filter, a row, and Select on the phone.
Live
Anatomy, top to bottom
- Page header. The title (with the view menu once saved views exist), Export, and Create. On phones Create floats bottom right above the tab bar and shrinks to + while you scroll; Select takes its place in the header. App shell
- Summary cards. One status card per status, after All, and one insight card. On phones the insight leads. Summary cards
- The table card. Its header (add filter, search, the date range, display settings), the chips once something is set, the table, the footer. Table card
- The record. A row click peeks (beside the list from 1280, a side sheet below) or opens the record itself; the list says which. Record
- The floating bar. Bulk actions once rows are ticked; on phones selecting is a mode. Floating bar
- Menus and popovers. Filters, display settings and row actions; bottom sheets on phones. Popover
- States. Loading, empty, no results and error, inside the table card. States
Behaviour
| What | How | Where it's written |
|---|---|---|
| Scrolling | The title scrolls away. Into the list, scrolling down hides the top bar and the card header (the column header stays on desktop, the tab bar on phones); a few pixels back up brings them back in 300 ms. Menus, a focused field, or Tab into a bar keep them. | list-page.css · data-chrome-hidden |
| A row click | Peek or open, declared per list. Checkboxes never open; the name stays a real link. | D30 · I6 |
| Selecting | Checkboxes and a select-all header on desktop; on phones Select or a long press, then taps tick. | I6 · D32 |
| Columns | Widths from the headers, never the rows; the checkbox and name stay pinned when the table scrolls sideways. | data-table.css |
| Phone rows | Four corners: number and date, amount, the name across the full width, where and status. | D32 · L-phone-row |
Building a new list
Describe it, don't draw it: a page description says what the page is (columns and their types, statuses, cards, filters, actions, what a click does) and the rules decide the rest. The list recipe holds the rules, the survey's questions and every field; the bolster-page skill turns a screenshot and a short survey into a description; the renderer draws it in this page.