List With Preview
An interactive work list where selecting a project row swaps the side panel to that project's thumbnail, summary, role, and case study link.
An interactive work list where selecting a project row swaps the side panel to that project's thumbnail, summary, role, 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
List With Preview is an interactive two-column work index: the left column lists five projects as selectable rows naming the project, kind, and year, and clicking a row swaps the right panel to that project's Placeholder thumbnail, name, year, kind, role, and case study link. The first project shows on load, and the heading reads Pick a project, see the work with a lede inviting visitors to select any row.
State lives in a single useState holding the active
project, and the pressed row is tracked with aria-pressed
for keyboard and screen reader users. Keeping the whole index
visible while previewing one pick is the distinctive choice,
so visitors never lose their place in the list.
Reach for this block as the work section on a portfolio with five to eight projects when you want browsing to feel quick and the index to stay in view. The installer swaps the project rows and preview copy for their own engagements.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is a designer index where each row previews a single project without leaving the page. Other uses:
Tip: keep the first row selected on load so the preview panel is never empty when the section comes into view.