Home/Patterns/Detail view

Detail view

The single-record page. Hero + 1.4 + 1 fr body. Five compositions for different record shapes.

Stable 5 compositions
COMPOSITION 01

Person record

Student, employee, customer. Identity-led hero, contact sidebar, activity feed.

Use whenA record represents a person you have ongoing context with — academics, history, photos, contacts.
TM
FAR-2026-001

Tariro Moyo

Form 4 Faraday · Full board · guardian Robert Mukamba
Active
Term marks
Maths · 81.5 · A
English · 72.4 · B
Biology · 84.0 · A
Shona · 79.0 · A
History · 68.4 · B
Sports · —
Contact
GuardianRobert Mukamba
Phone+263 77 482 0011
Emailrobert@mukamba.co
EmergencyMai Mukamba
COMPOSITION 02

Transaction record

Money-first hero. Line items as the main column; activity + audit as the aside.

Use whenA record represents a single transaction — receipt, refund, invoice, payslip, settlement.
R-19281

$ 17.21cash · 4 items

14:32 · Faith Moyo · Park Centre · Till 02
Mazoe Orange Crush 2L×2$ 9.00
Pro-bake bread loaf×3$ 4.50
Cooking oil 750ml×1$ 3.20
Bulk discount—– $ 2.20
Total$ 17.21
Activity
Posted to ledger14:32:09
Printed14:32:12
Loyalty pts +1714:32:09
COMPOSITION 03

Asset record

A piece of equipment, a vehicle, a camera. Photo (or schematic) lead, metadata grid, maintenance history aside.

Use whenA record represents physical infrastructure — vehicle, camera, machine, building.
VHC-ABX-2841 · 2022 Toyota Hilux

ABX-2841 · Park Centre delivery

Diesel · 84,250 km · last serviced 12 Apr at 81,900 km
In service
Maintenance history
Service · 30,000 km12 Apr$ 184
Tyre replacement28 Feb$ 412
Brake pads · front14 Jan$ 96
Service · 25,000 km08 Dec 2025$ 184
Specs
VINJT123ABX2841
Engine2.4 L diesel
Capacity1 t payload
InsuranceOld Mutual · Sep
DriverTendai Nyathi
COMPOSITION 04

Workflow record

A multi-step process: a payroll run, an import job, a settlement run. Progress bar lead; step-by-step body.

Use whenThe record is a workflow that runs over minutes or hours, with a sequence of completed and pending steps.
PAYRUN-2026-06

June payroll · 187 employees

Started by Mai Ndlovu · 09:14 · expected 22 min
Running · step 3 of 5
✓Validate inputs
✓Compute PAYE
·Generate payslips
Send notifications
Lock period
Step 3 · Generate payslips
Employee 142 of 187Faith Moyo
Employee 143 of 187Hopewell Mafuta
Employee 144 of 187Innocent Ndoro
Employee 145 of 187Joyce Mukamba
COMPOSITION 05

Compact record

When the record has few attributes — a tag, a tax rate, a permission. Single column, no sidebar.

Use whenThe record is a small reference object with under ten editable fields.
TAX-VAT-145

VAT · 14.5 %

Default sales tax applied to every line item.
%

Shared rules

What every composition obeys.

Do

Surface the next likely action in the hero. A student leads with "Record payment"; a receipt leads with "Refund".

Don't

Repeat hero data in the sidebar. Aside is for things not shown above.

Do

Anchor activity to the right column. The operator scans "what happened" while looking at "what is".

Don't

Cram too many sections. If a record has 10 subsystems, use detail tabs.