About this block

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.

When to use

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

• Name and role hero

After

• Case study split
• Contact band

What you can display

One strong use is a designer index where each row previews a single project without leaving the page. Other uses:

• Writing archive. Rows are article titles and the panel previews the cover and summary.
• Speaking list. Rows are talks and the panel shows the event, the abstract, and a recording link.
• Service menu. Rows are service lines and the panel describes scope, timeline, and a starting price.

Tip: keep the first row selected on load so the preview panel is never empty when the section comes into view.