Case Study Hero
A fold-filling project page opener with the project name large, a one-line outcome summary, a four-cell meta row of client, role, year, and deliverables, and a wide cover image.
A fold-filling project page opener with the project name large, a one-line outcome summary, a four-cell meta row of client, role, year, and deliverables, and a wide cover image.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Case Study Hero opens a project page: the project name large, a one-line summary of what moved, a four-cell meta row carrying client (Ledger Inc.), role, year, and the full deliverable list, then a wide Placeholder cover image filling the fold below. The fold is covered via min-h-screen and justify-center.
The meta row is one array rendered as a dl grid. A cover image this size makes skimming feel intentional, not lazy, because the title and meta have already done the qualifying work.
Reach for this block at the very top of a project or case study page, before any body copy. The installer swaps the project title, the one-line summary, each meta cell, and the cover image for real work.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the fintech project page opener. Other case study hero shapes:
Tip: the one-line summary is the only sentence a skimmer reads before deciding to scroll, make it carry a number or a concrete change rather than a mood.