Lists
Basic List
A .data-list wraps rows. Each .data-list-item takes a leading avatar, a .data-list-body and trailing meta.
Route 01 · North
Downtown Ave · 34 km/h
Route 07 · South
Harbour Road · 12 km/h
Route 02 · West
Central Park · 28 km/h
Route 09 · Express
Highway 101 · 55 km/h
Sizes & Dividers
Use .data-list-sm for compact items, .data-list-lg for spacious items, or .data-list-dashed to swap solid separators for dashed ones.
Compact List (Dashed Dividers)
Science & Technology
Main Library · Shelf A4
Mathematics & Logic
Science Wing · Shelf B2
Computer Science
Tech Hub · Lab 01
Classical Literature
Arts Block · Floor 2
Header & Footer
.data-list-header and .data-list-footer bookend a list without needing extra card sections.
Inbox Messages 4 unread
24 today
Robert Daniel
Requested a parent-teacher meeting
Steven Vance
Replied to the monthly newsletter
Laura Martinez
Submitted medical leave form for Grade 8
David Williams
Inquired about term fee installment receipt
Sophia Taylor
Confirmed afternoon transport pickup location
Accents
Add .accent-success, .accent-danger, .accent-warning, .accent-purple or .accent-pink to give a row a status rail.
Route running on timeLIVE
Minor traffic reportedTraffic
Route delayed 12 minutesDELAYED
Maintenance scheduledPlanned
Awaiting parent confirmationPending
Add .data-list-item-top when a row's trailing content is taller than one line — it aligns everything to the top instead of centring.
Meeting request
Robert Daniel would like to discuss Term 1 progress and the upcoming parent–teacher evening.Inset & Stacked Rows
.data-list-inset gives the list a soft panel. A row can stack with .flex-column.align-items-stretch and hold a .stat-grid.
Route 01 — North
LIVE
James CooperDriver GPS OK
42Onboard
8 minETA
34 km/hSpeed