Components / Display / List cardOpen in Figma

List card

Ready

A white card that stands for one record in a list: who it is about, its status and a meta line.

Platforms Phone · TabletGroup DisplayUpdated 26 Oct 2026

When to use

  • A list of records where each one is about a person, a request or an item.
  • The record has one status that people scan for.
  • Tapping the card opens the record.

When not to use

If people need toUse
Show a request or approval that is waiting on someoneRequest card
Show an animalAnimal card
Choose or show a siteSite card
Show what happened to a record over timeHistory

Anatomy

badgeRecord numberStatus
AB
Name
Detail
Name • Date
  1. Head strip · optional
  2. Record number · with the head strip, 16 badge icon
  3. Status label · required, said once
  4. Initials · required when the record is about a person
  5. Name · required
  6. Detail · optional, one line
  7. Meta line · optional

Variants

VariantPurposeFigma
With head stripThe record has its own number people look up; the number and status sit in a strip above the bodyDesigned
Without head stripNo record number; the status label sits on the right of the name rowTemporary rule

States

StateWhenWhat changesFigma
DefaultThe record is loadedAs drawnDesigned
LoadingThe list is still loadingSame layout; light grey blocks where text will be, no spinnerTemporary rule

Behaviour

  • The whole card is one tap target and opens the record.
  • Cards sit 12 apart on the page background; there is no divider between them.
  • Text that is too long ends in an ellipsis on one line; the card never grows sideways.
  • Actions on the record live inside it or in a menu, never as buttons on the card.

Phone and tablet

PhoneTablet
Card padding1216
Status label type12 Semibold14 Medium
Gap between cards1212

Content

PartRule
Record numberThe ID as people say it, prefix and number
NameThe person or thing the record is about
DetailOne fact that tells two similar cards apart, such as the organisation
Status labelOne or two words; the status appears once on the card
Meta lineWho and when, joined by " • "

Do and don't

Record numberStatus
AB
Name
Detail
DoSay the status once, as a label.
Record numberStatus
AB
Name
Status
Don'tRepeat the status as a colour stripe or a second line.
AB
Name
Detail
DoKeep the card flat: white with corners 8.
AB
Name
Detail
Don'tAdd a border and a shadow. Only request cards lift.
Request cardStatus labelList layoutSearch and filter
← Bottom navigationRequest card →