Before After Card

About this block

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.

When to use

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

• Name and role hero
• Featured work grid

After

• Case study split
• Process steps

What you can display

One strong use is the redesign case index for a product designer. Other uses:

• Agency version. Keep the before and after crops but swap the personal result for a client impact line.
• Migration story. The Before is the legacy system, the After is the rebuilt one, the result is adoption.
• Brand refresh. Old identity against new, with recall or engagement as the closing figure.

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%.