Work Accordion
An accordion work index of ruled project rows that each expand to a thumbnail, summary, deliverables list, and case study link.
An accordion work index of ruled project rows that each expand to a thumbnail, summary, deliverables list, and case study link.
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
Work Accordion presents four projects as ruled rows, each naming the project, kind, and year, that expand to reveal a Placeholder thumbnail, a summary paragraph, a deliverables list, and a case study link. The first project opens by default so the pattern reads at a glance, and the heading says The work, one row at a time with a lede pointing to the summary, deliverables, and full case study inside each row.
The block is built on the shadcn Accordion set in single
collapsible mode with defaultValue on the first project.
Projects are one array carrying a description and a
deliverables list, so opening a row keeps the index compact
while still giving each project room for real detail.
Reach for this block when the portfolio has a handful of projects that each deserve a paragraph and a deliverables list, but a full grid of open detail would overwhelm the page. The installer swaps the project rows, summaries, and deliverables for their own engagements.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is a designer's selected work where each project carries a scope and a deliverables list. Other uses:
Tip: keep one row open by default; a fully closed accordion hides the detail that makes the pattern worth it.