Duo Tone Card
A project card grid where each tile pairs a thumbnail with a muted caption panel in a contrasting surface tone, no gradient.
A project card grid where each tile pairs a thumbnail with a muted caption panel in a contrasting surface tone, no gradient.
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
Duo Tone Card shows four projects in bordered tiles, each with a Placeholder thumbnail above a muted caption panel that carries the project name, role, and year. The contrast comes from bg-card against bg-muted/50 on the caption strip, not from a gradient, giving each card a clean two-surface read.
Projects are one array. The muted panel is the distinctive detail, it separates caption from image by tone alone so the text sits in its own layer without any overlay.
Reach for this block as the work grid on a homepage or a dedicated projects page. The installer swaps the Placeholder tiles for real project images and keeps the caption strip honest about role and year.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the selected-work grid with surface contrast. Other project-card layouts:
Tip: keep the caption strip to two lines maximum, a third line breaks the visual rhythm across the grid.