The product’s only list is the activity timeline on a client record. Everything else that looks like a list is a table. A filter row sits above it; the entries themselves live on a white card with a connector line running down the icon rail.
Activity timeline
Each entry type has its own icon colour on a 12% tint of the same hue. The six types are fixed. The vertical connector is drawn between discs and stops at the last entry.
Policy bound
Oct 14, 2026 09:12 AMGL policy GLP-884512 issued for Garcia Landscaping.
by Jane Smith
Quote submitted
Oct 13, 2026 04:40 PMQuote QAN334455667 sent to the carrier for review.
by Jane Smith
Document uploaded
Oct 13, 2026 11:05 AMFive years of loss runs added to the client file.
by Jane Smith
Email sent
Oct 11, 2026 08:30 AMRenewal reminder sent 60 days ahead of expiration.
by Jane Smith
Call logged
Oct 10, 2026 02:15 PMSpoke with the producer about adding inland marine.
by Jane Smith
Note added
Oct 09, 2026 05:48 PMClient prefers email over phone for all renewals.
by Jane Smith
Specs
| Part | Value |
|---|---|
| Card | radius 12px · padding 20px · #fff on 1px #E9EAEC |
| Entry | display:flex · gap 16px · body has padding-bottom 20px |
| Icon disc | 28×28px · radius 9999px · 12% tint of the type colour · icon 14×14px · rail padding-top 2px |
| Connector | 1px wide, flex:1, margin 8px 0, #E9EAEC — omitted on the last entry |
| Title | 13px / 600 · #1F2937 · row has margin-bottom 4px |
| Timestamp | 11px · #6B7280 · margin-left 16px, never wraps |
| Description | 12px · #6B7280 · margin-bottom 4px |
| Attribution | 11px · #9CA3AF · always by {user} |
Filter chips
| State | Value |
|---|---|
| Shape | padding 6px 12px · radius 12px · gap 6px · 12px / 400 |
| Rest | background #F9FAFB · 1px #E9EAEC · color #6B7280 |
| Selected | Border and text take the type colour; fill is that colour at 15 (8%) alpha |
| Count pill | 10px · padding 2px 6px · radius 9999px · #E5E7EB, or the type colour at 20 alpha when selected |
Type colours
| Type | Icon | Tint |
|---|---|---|
| Policy | #74C3B7 | rgba(116,195,183,.12) |
| Quote | #A78BFA | rgba(167,139,250,.12) |
| Document | #60A5FA | rgba(96,165,250,.12) |
#F59E0B | rgba(245,158,11,.12) | |
| Call | #34D399 | rgba(52,211,153,.12) |
| Note | #F97316 | rgba(249,115,22,.12) |
These six are decorative type markers, not semantic colours. #F59E0B here means “email”, not “warning”, and #F97316 means “note”, not “danger”. Do not reuse them for state. |
| For tabular data use a table. This timeline exists because activity entries are heterogeneous and have no columns. |
| When the filter matches nothing the card shows a centred empty state: a 32×32 muted icon over No activity found at 13px. |