Stacked Highlight Cards
A vertical stack of project cards, each holding an image, title, and tags. Use it to walk visitors through selected highlights in a clear reading order.
A vertical stack of project cards, each holding an image, title, and tags. Use it to walk visitors through selected highlights in a clear reading order.
Search blocks by description or jump to a page.
Stacked Highlight Cards opens with a centered heading and a short subheading that frames the selection. Below that sits a vertical stack of cards, each split into two columns on wider screens: a cover image on the left occupying one third of the width, and a details panel on the right taking the remaining two thirds. The details panel shows up to three technology badges, the project title, a metadata row with client name, role, and year, a short description paragraph, and a "View Project" button with an arrow icon.
Each card is independent. You can reorder the stack, add or remove cards, and swap every field in the details panel without touching the surrounding layout. The badge row silently trims to the first three tags in the list, so you can keep a longer tag set in your data and let the block decide what to surface.
Reach for this block when you want visitors to read through your work in a deliberate sequence rather than scan a grid at speed. It suits a logistics or operations portfolio where each project has meaningful context such as client, role, and delivery year that a thumbnail grid would have to drop. The reading order makes it easier to build a narrative across three or four pieces, and the metadata row gives recruiters or procurement teams the quick reference they need.
A natural flow around it on a Portfolio page:
Before
After
Each card can carry whatever project context is most relevant to your audience. A few ways to fill out the fields:
Tip: keep descriptions to two or three sentences so every card in the stack stays the same visual height and the page reads as a cohesive list.