Index Preview Gallery
A numbered list of works with medium and year on the left beside a large preview of the highlighted row with its caption and counter.
A numbered list of works with medium and year on the left beside a large preview of the highlighted row with its caption and counter.
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
Index Preview Gallery pairs a numbered list of works on the left with a large preview of the highlighted row on the right. Each list entry carries an index number, a title, a medium, and a year, from Tide tables to House with no road; the active row is set in full foreground while the rest recede in muted type. The preview panel shows the highlighted plate with its caption and a position counter reading its place in the set.
Works are one typed array with an active boolean; the component derives the preview from find with a fallback, so noUncheckedIndexedAccess cannot throw. Rendered as a static blueprint, it communicates the hover to preview index pattern without any running JavaScript.
Reach for this block as a considered index for a print maker, photographer, or artist with an editioned body of work. The installer swaps the Placeholder plate for real images and wires the rows to a state toggle for interactive preview.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the print maker index of editions. Other index preview layouts:
Tip: the medium and year columns are what make this read as an index rather than a menu; keep them precise so the list carries authority on its own.