Project 4 C block design & features
The block opens with a near-full-viewport hero image behind a dark overlay, with centered white text including a small label, a very large bold title, and a subtitle. Below the hero, an article header displays metadata (creative direction, industry, year, reading time) in a bordered row. The article body uses prose typography with a large lead paragraph, headed sections, a blockquote, figure elements with figcaption text, an ordered list with bold labels, and a three-column metrics grid showing key results (40% recognition increase, 15+ partnerships, 85% feedback) on a muted background.
The hero overlay is a 40% black scrim for text contrast. The prose article uses standard heading hierarchy with breakout figure images that extend beyond the text column via negative margins. The metrics grid uses large bold numbers with small muted labels beneath each. The blockquote follows default prose styling. Figure captions are italic, centered, and padded.
This variant is the most content-rich of the case study series, combining a cinematic hero, structured prose, and quantitative results. No animations are present. Built with Shadcn UI tokens and prose utilities.
On smaller screens the metrics grid stacks to a single column, breakout figure images reduce their negative margins, and the hero text scales down.