Components
List card
List card
Row-card visualisation for quote and transaction lists. Stacks client identity, status, reference, address rows, optional client roster, and contextual partner / branch / referrer rows into a single tap-targetable surface — an alternative to a table layout when the row data doesn't fit a rigid grid.
Canonical
The most-used shape. Click anywhere on the card to navigate to the underlying entity — nested links (note bubble, partner avatar) intercept their own clicks.
Variants
4 variantsExpiring quote
ExpiresSoon=true
Discounted quote
StrikethroughOriginalAmount
Transaction with referral
InlineReferralAmount
£365,0002 days ago
Sam Patel
Lee Patel
No client
Blocked
T-8FQ3PA
12 Birch Lane, SW1A 1AA
Sam Patel
Lee Patel
Sterling Estates
Bristol
Cross-partner transaction
ShowPartner + ClientRoster
States
2 statesProps
ListCardModel| Property | Type | Notes |
|---|---|---|
| ViewUrl | string | Whole-card click target. |
| ClientName, ClientNameIsPlaceholder | string, bool | Primary line-1 label. Placeholder flag mutes the text for "No client" fallbacks. |
| StatusColor, StatusLabel, StatusShimmer | BadgeColor, string, bool | Pre-resolved status badge. Build from StatusBadgeMapping in Portal. |
| PrimaryAmount | string | Right-column amount, pre-formatted as currency. |
| StrikethroughOriginalAmount | string? | Undiscounted total rendered struck-through under the primary. |
| InlineReferralAmount | string? | Pre-formatted "Referral £X" rendered below the price. |
| CreatedAtRelative | string | Pre-humanised relative time (e.g. "2 days ago"). |
| ExpiresSoon | bool | Adds an "Expires soon" warning pill under the timestamp. |
| AddressRows | IReadOnlyList<ListCardAddressRow> | One row per address. |
| ClientRoster | IReadOnlyList<ListCardClient> | Transaction-only roster with avatars. |
| Partner, BranchName, Referrer | ListCardPartner?, string?, ListCardPerson? | Bottom contextual rows. |
| ReferralAmount | ListCardReferralAmount? | Pre-formatted referral pill placed against the partner / branch / referrer row. |
| DesktopColumns | IReadOnlyList<ListCardColumn>? | Set on list pages to render a horizontal grid row at xl+ alongside the stacked card. See list table. |
Do & don't
Do
Use ListCardFactory.FromQuote / FromTransaction so the status, currency, and referral logic stays consistent across every list surface.
| Client | Reference | Total |
|---|---|---|
| Jane Doe | Q-OQKBLK | £1,840 |
| Priya Shah | Q-44GH2X | £1,560 |
Don't
Don't use list cards for rows with identical fixed columns. Reach for a table instead.