Components / Display / Request cardOpen in Figma
Request card
ReadyA lifted card for a request or an approval, with its status in a strip along the bottom.
When to use
- The record is a request or an approval that waits on someone.
- People scan a list to see what still needs a decision.
When not to use
| If people need to | Use |
|---|---|
| Show any other record in a list | List card |
| Show a status inside a detail screen | Status label |
| Show an animal | Animal card |
Anatomy
AB
Name
Detail
date_rangeStart date → End date
paceAwaiting approvalSince 2 days
- Who row · required: initials and name of the person who asked
- Meta line · required: record number, person and age
- Detail · optional: what is asked for, up to two lines
- Fact row · optional: 20 icon and a value
- Status strip · required
- Strip icon and label · required: 20 icon, then the status
- Time · optional: how long it has been in this status
Variants
| Variant | Purpose | Figma |
|---|---|---|
| Awaiting | Waiting for a decision | Designed |
| Approved | The request was approved | Designed |
| Rejected | The request was turned down | Designed |
States
| State | When | What changes | Figma |
|---|---|---|---|
| Default | The card is in a list | As drawn | Designed |
Behaviour
- The whole card opens the request.
- The strip is the only place the status appears on the card; there is no status label as well.
- The strip is only for request and approval cards. Every other card uses a status label.
- Detail text stops at two lines and ends in an ellipsis.
Phone and tablet
| Phone | Tablet | |
|---|---|---|
| Card width | Full width less 16 each side | Column width in the list panel |
| Gap between cards | 12 | 12 |
Content
| Part | Rule |
|---|---|
| Meta line | Record number • person • age, such as "2 d" |
| Detail | What is asked for, in plain words, not the form title |
| Strip label | The status in two or three words |
| Time | "Since n days" for waiting; the date for a decision already made |
Do and don't
AB
Name
paceAwaiting approval
DoShow the status once, in the strip.
ABNamePending
paceAwaiting approval
Don'tAdd a status label as well as the strip.
ABNameStatus
DoUse a list card with a label for records that are not requests.
AB
Name
check_circleStatus
Don'tPut a strip on cards that are not requests or approvals.
Related
Specs
Click a value to copy it.
| Part | Property | Phone | Tablet |
|---|---|---|---|
| Card | Fill | ||
| Corners | |||
| Shadow | |||
| Body | Padding | ||
| Gap | |||
| Initials | Size | ||
| Name | Type | ||
| Colour | |||
| Meta line | Type | ||
| Colour | |||
| Detail | Type | ||
| Colour | |||
| Fact row | Icon | ||
| Strip | Inset from card edge | ||
| Padding | |||
| Corners | |||
| Gap | |||
| Strip icon | Size | ||
| Strip label | Type | ||
| Strip time | Type | ||
| Colour | |||
| Awaiting | Fill | ||
| Text | |||
| Approved | Fill | ||
| Text | |||
| Rejected | Fill | ||
| Text |
Accessibility
- The card is read as one item, ending with the strip label, so the status is never carried by colour alone.
- Each strip has its own icon: pace, check_circle or cancel.
- Strip labels score 17.3 (Awaiting), 5.9 (Approved) and 3.6 (Rejected) for readability. Rejected is below 4.5, so the icon and the words carry the meaning, never the red alone.
- The time at 40% black scores 2.8; it is extra, never the only copy of a fact.
Changes
| Date | Change |
|---|---|
| 26 Oct 2026 | Added from the Help Desk request card and status strip. |