Home/Patterns/Detail tabs

Detail tabs

Five compositions for multi-aspect detail surfaces — student, vehicle, employee, supplier, settlement.

Stable5 compositions

Shell at every breakpoint

Hero · tabs strip · single content panel. Greyscale wireframes — content is intentionally skeletal.

Mobile
SM
Tablet
MD
Desktop
LG

Live examples

Where to see this shell in action — reference docs, cookbook recipes, and shipped kits.

REFERENCE Detail tabs anatomy Hero, tab strip, content panel — parts list and contract. Open reference → COOKBOOK Master · detail List-to-detail-tabs flow — selection drives the tabs. Open recipe → KIT · LIVE Employee detail Shipped detail-tabs kit (profile · pay · time · leave). Open live →
COMPOSITION 01

Student record

5 tabs — Overview · Academics · Fees · Attendance · Medical. Pulse dot on Fees when in arrears.

Use whenA record has multiple separable aspects, each deserving its own surface.
COMPOSITION 02

Vehicle record

4 tabs — Profile · Service · Trips · Documents. The Service tab tally shows recent work.

Use whenAsset records with operational, financial, and regulatory aspects.
COMPOSITION 03

Employee record

6 tabs — Profile · Compensation · Time · Leave · Documents · Disciplinary. Hide tabs the operator's role can't see.

Use whenA record that touches many sub-systems with different access policies.
COMPOSITION 04

Supplier record

4 tabs — Profile · History · Pricing · KYC. KYC pulses when documents are about to expire.

Use whenA counterparty record with transactional and regulatory aspects.
COMPOSITION 05

Settlement batch

4 tabs — Summary · Lines · Variance · Documents. The Variance tab badges when unresolved.

Use whenA workflow record with sub-records and reconciliation views.

Shared rules

Do

Use tabs when each aspect deserves a full surface. Otherwise stack them.

Don't

Hide critical change behind a non-default tab. Pulse the badge.

Do

Reflect the tab in the URL.

Don't

Nest tabs inside tabs.