Home/Blocks/Detail page shell

Detail page shell

The standing layout for any single-record detail page — hero + two-column body.

Stable .detail-page 1.4 + 1 grid

Default

Hero + 1.4 fr main + 1 fr aside.

R-19281 · 14:32

$ 17.21 · cash sale

4 items · Faith Moyo · Till 02 · Park Centre
[ line items ]
[ activity ]
Detail page shell

Do & don't

Do

Use the same shell for every detail page. Pours, students, employees — all use this skeleton.

Don't

Mix 1.4 + 1 with other ratios. The eye gets used to where to look.

Do

Put activity and metadata in the right column. They are never primary.

Don't

Stack everything in a single column on desktop. Use the aside.