Home/Components/Mobile list

Mobile list

A vertically-stacked list optimised for thumbs. 56 px rows minimum; leading avatar/icon; trailing chevron or amount.

Stable .mobile-list 56 px rowTouch-friendly

Default

Three regions per row: lead, body, trail. Tap target spans the row.

New sale
Ring up a customer
Receipts
147 today
Items
2,418 active
Customers
Loyalty members
More
Reports, settings
Mobile list rows

With trailing meta

TM
Tariro Moyo
Form 4 · Faraday
$ 1,240
AB
Akudzwe Bere
Form 4 · Faraday
Cleared
DG
Dakarayi Gondo
Form 4 · Faraday
$ 420
EH
Edwin Hove
Form 4 · Faraday
Cleared
Student fees list

Do & don't

Do

Make the whole row tappable. Reaching for a tiny chevron on a phone is bad ergonomics.

Don't

Cram three lines of metadata. One sub-line is the max.

Do

Use a leading icon or avatar to anchor the eye. The list scans faster.

Don't

Use a mobile list on desktop. Use a table.