Large Hero Project Display
A full width hero that frames one flagship project with a big image, title, and short summary. Use it to open a case study or anchor a portfolio.
A full width hero that frames one flagship project with a big image, title, and short summary. Use it to open a case study or anchor a portfolio.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Large Hero Project Display opens with a centered section heading and a short subheading, then fills the width with a tall rounded image. A dark gradient overlays the bottom of that image and holds the project title, a "Featured Work" label, and up to three technology badges with an overflow count. Below the image a three column grid splits into a narrow left column and a wider right column. The left column lists the client name, role, year, and a full technology badge list, then ends with a call to action button. The right column carries two prose sections, "Project Overview" and "Results and Impact," each with a heading and a paragraph of body text.
Every piece of copy in the block is independent. The section heading, subheading, image, project title, badge list, client, role, year, overview paragraph, and results paragraph can all be swapped without affecting the others. The left and right columns are part of the same responsive grid, so the sidebar detail list can be extended or shortened as your project metadata requires.
Reach for this block when you want to anchor a portfolio page around a single flagship project rather than a grid of thumbnails. It works well on a workspace product portfolio where decision makers want to see not just what was built but who owned it, when it shipped, and what outcomes it produced. It gives more vertical room to outcomes and narrative than a card grid, and more structured metadata than a plain image and blurb.
A natural flow around it on a Portfolio page:
Before
After
One flagship project with all its supporting context is the core use case. A few specific fits:
Tip: choose a wide landscape image with a clear focal point near the center; the gradient crops the lower third, so keep key visual elements in the upper half of the photo.