Before After Stats
A heading and lede above ruled rows that pair each metric and its measurement note with a before figure, an arrow, and an after figure.
A heading and lede above ruled rows that pair each metric and its measurement note with a before figure, an arrow, and an after figure.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Before After Stats is the change-over-time block, three ruled rows that each pair a metric with a before figure, an arrow, and an after figure so no result stands without its starting point: checkout load time from 6.4s to 1.2s on a storefront rebuild for Fernway Goods, trial to paid conversion from 2.1% to 3.4% on a Series A onboarding redesign, and time to publish a page from 48h to 6h on an editorial design system. A note under each metric records how the change was measured.
Rows are one array in a bordered, divided card. The measurement note is the distinctive element, naming the client, the window, and who ran the numbers keeps the delta from reading as a claim.
Reach for this block on a case study page or a homepage where you want a result to read as a documented improvement rather than a single flattering number. The installer swaps the three metrics, the before and after figures, and the measurement notes for their own work.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the before-and-after outcome ledger for a product designer. Other paired figures:
Tip: the note under each metric must name the client and the window, a before-and-after pair without a source reads as invented.