Home/Blocks/Detail hero

Detail hero

The top of a single-record detail page. Big title, key facts, primary action — everything the operator needs before scrolling.

Stable .detail-hero Anchored to one record

Default

Title + status, sub-description, primary action.

Pour P-2841

3.044 kg fine gold

Poured 07:48 · Plant M-01 · Operator Stanford Kuda · assayed 94.6 % fineness

Detail hero · pour

With metadata grid

A row of key/value facts under the title — the at-a-glance summary.

SH-2841

Shipment to Rand Refinery

In transit · Expected arrival 4 Jun
Total weight
4.20 kg fine
Pours included
P-2839, 2840, 2841
Courier
G4S Heavy
Insured value
$ 412,800
Hero with metadata grid

Tonal status

A coloured strip on the left edge keeps the state visible while the operator scrolls the page.

● Settlement overdue · 4 days

Shipment SH-2839

4.20 kg fine. Expected settlement 30 May. Refinery confirmed receipt but assay results unposted.

Hero with danger strip

Do & don't

Do

Put the record’s identifier (mono, small) above the title. Operators search by ID.

Don't

Hide the primary action below the fold. The next move belongs in the hero.

Do

Use the metadata grid for 4–6 must-see facts. More than that becomes a sidebar list.

Don't

Repeat title and breadcrumb. Pick the one the operator needs most.