Project 4 A block design & features
The block divides into a one-column sticky sidebar and a three-column main content area on large screens. The sidebar contains the project title, a short description, metadata labels (creative director, industry, year), and an anchor navigation menu linking to in-page sections. The sidebar sticks to the top of the viewport as the user scrolls. The main content area includes a hero image, a lead paragraph, and prose sections for challenge, process, and outcome, each with headings, body text, and inline images with italic captions.
The sidebar navigation uses plain anchor links styled with hover color transitions. Metadata labels use uppercase extra-small semibold text, separated from the navigation by a top border. The prose content follows standard heading hierarchy with breakout images that span the full content column. Captions are centered and italicized in muted text.
The layout is structured as a documentation-style case study with persistent navigation. The sticky sidebar keeps orientation easy through long scrolling content. No animations are present. Built with Shadcn UI spacing tokens.
On smaller screens the four-column grid collapses to a single column with the sidebar content appearing above the main content area, and the sticky behavior is disabled.