Ticket #1042, 9:14 AM
Printer on 3F jams on every second page
Medium
Open
Display / Cards
Cards
Three paper objects for three jobs: a ticket stub for queue items, a taped unit card for people, a sticky note for quick context.
Server ComponentWCAG AASince v0.1
Mobile 2
PO2 Jun Reyes, 2 ridersEn route6min away
import { TicketCard, UnitCard, UnitCardRow, StickyNote, Eta, Tag, Avatar } from "@plop-ui/react";
<TicketCard meta="Ticket #1042, 9:14 AM" title="Printer jams" stub="Open">…</TicketCard>
<UnitCard name="Mobile 2" subtitle="PO2 Jun Reyes" avatar={<Avatar name="Jun Reyes" />}>
<UnitCardRow><Tag status="en-route">En route</Tag><Eta value={6} unit="min away" /></UnitCardRow>
</UnitCard>
<StickyNote footer="Added by Ana">Use the side entrance.</StickyNote>Change every prop live in the playground.
Props
TicketCard
| Prop | Type | Default | What it does |
|---|---|---|---|
| title required | ReactNode | — | — |
| children | ReactNode | none | Tags, assignee and so on. |
| headingLevel | 2 | 3 | 4 | 3 | Heading level of the title. |
| meta | ReactNode | none | Small line above the title, e.g. "Ticket #1042, 9:14 AM". |
| stub | ReactNode | none | The tear-off stub, e.g. "Open". |
| tilt | number | none | — |
Also takes every attribute of <article> (276 more, e.g. onClick, className, aria-*).
UnitCard
| Prop | Type | Default | What it does |
|---|---|---|---|
| name required | ReactNode | — | — |
| avatar | ReactNode | none | Usually an <Avatar>. |
| children | ReactNode | none | Rows: status and ETA, actions. |
| headingLevel | 2 | 3 | 4 | none | — |
| subtitle | ReactNode | none | — |
| tilt | number | none | — |
Also takes every attribute of <article> (277 more, e.g. onClick, className, aria-*).
StickyNote
| Prop | Type | Default | What it does |
|---|---|---|---|
| children required | ReactNode | — | — |
| footer | ReactNode | none | Small line at the bottom, e.g. "Added by dispatcher Ana, 9:06 AM". |
| tilt | number | none | — |
| tone | "mint" | "mustard" | "pink" | mustard | Paper color of the note. |
Also takes every attribute of <aside> (277 more, e.g. onClick, className, aria-*).
Use it well
DoKeep one job per card: a queue item, a person, or a note.
Don'tNest cards inside cards. Paper on paper on paper gets hard to read.
Accessibility
- Tickets and unit cards are <article>s with real headings (level 3 by default).
- Sticky notes are <aside>s.