Search blocks by description or jump to a page.
Two redesign cards in a grid, each pairing captioned before and after thumbnails side by side with a name, meta line, and result figure.
The source for every Portfolio block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Before After Card shows two redesign projects as cards in a two-column grid. Each card leads with the project name and year, a meta line of kind and role, then two captioned Placeholder thumbnails side by side: the inherited Before and the shipped After. A bordered line closes each card with the number that moved, +28% activation for Ledger and 82% completion for Tend, each with a one-line note on how it was measured.
Projects are one array of objects. The paired before-and- after thumbnails are the distinctive choice: the delta between the two images carries the argument, and the result figure underneath puts a number on it.
Reach for this block on a dedicated work page or a homepage when the story is the improvement, not the screenshot. The installer swaps the two Placeholders for real before and after captures, rewrites the notes, and updates the result figure to their own measured outcome.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the redesign case index for a product designer. Other uses:
Tip: the result line earns the card only when it names a real number; a vague cleaner and more modern loses to a specific 44% up to 82%.