Components / Display / Request cardOpen in Figma
Request card
ReadyA lifted card for a request or an approval: category, priority, who asked, what for, and the 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.
- The default item in a list. See List layout.
When not to use
| If people need to | Use |
|---|---|
| Show a record that is not a request | List card |
| Show a status inside a detail screen | Status label |
| Show an animal | Animal card |
Anatomy
categoryCategory!
What is asked for, in plain words, up to two lines
attach_file6imagecurrency_rupee_circle12,000
paceAwaiting approvalSince 2 days
- Category tile · required: 32 Navy tile with the category icon
- Category · required
- Priority flag · required: Normal, High or Emergency
- Meta line · required: record number, person who asked and age
- Description · optional: what is asked for, up to two lines
- Attachments · optional: a count per kind of file
- Amount · optional: the cost, in Antz green
- Status strip · required: icon, status and how long it has been in it
Variants
| Variant | Purpose | Figma |
|---|---|---|
| Awaiting | Waiting for a decision | Designed |
| Approved | The request was approved | Designed |
| Rejected | The request was turned down | Designed |
| Normal priority | Turquoise flag with "!" | Designed |
| High priority | Coral flag with "!!!" | Designed |
| Emergency | Red flag with a fire icon | 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 description stops at two lines and ends in an ellipsis.
- Attachment kinds with no files are left out; with no files at all the row shows the clip and 0.
Phone and tablet
| Phone | Tablet | |
|---|---|---|
| Card width | Full width less 16 each side | Column width in the list panel |
| Gap between cards | 16 | 16 |
Content
| Part | Rule |
|---|---|
| Category | The department or kind of request, one line |
| Meta line | Record number • person • age, such as "REQ 567 • Name • 2 d" |
| Description | 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
categoryCategory!
paceAwaiting approval
DoShow the status once, in the strip.
categoryCategoryPending
paceAwaiting approval
Don'tAdd a status label as well as the strip.
Related
Specs
Click a value to copy it.
| Part | Property | Phone | Tablet |
|---|---|---|---|
| Card | Fill | ||
| Corners | |||
| Shadow | |||
| Gap between rows | |||
| Head | Padding | ||
| Gap | |||
| Category tile | Size | ||
| Fill | |||
| Category | Type | ||
| Colour | |||
| Priority flag | Size | ||
| Glyph | |||
| Normal | Fill | ||
| High | Fill | ||
| Emergency | Fill | ||
| Body | Padding | ||
| Meta line | Type | ||
| Colour | |||
| Description | Type | ||
| Colour | |||
| Attachments | Icons | ||
| Amount | Type | ||
| 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: category, priority, meta, then the strip label, so the status is never carried by colour alone.
- The priority flag is read as "Normal", "High" or "Emergency" priority, not as its glyph.
- 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 | Rebuilt to match the Help Desk card exactly: category tile, priority flag, description, attachments and amount. |
| 26 Oct 2026 | Added from the Help Desk request card and status strip. |