Search blocks by description or jump to a page.
A customer story told as two side by side panels contrasting the week before and after, closing with a row of three headline numbers.
The source for every Marketing block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Before After Panels frames one customer story as two side by side panels. The section opens with the customer wordmark, an outcome heading, and a short setup line, then splits into a muted "before" panel and a solid "after" panel. Each panel lists the same working week item by item, the before column marked with a cross and the after column with a check, so the contrast reads straight down the page. A closing stat row ties the two panels to the three numbers that moved.
Both panels are independent copy. The before and after lists are separate arrays, so you can add or remove a row on either side without touching the other, and the stat row takes any set of value and label pairs. The layout stays even as long as the two lists carry a similar number of items, since the panels sit in one shared two column grid.
Reach for this block when a customer story turns on a clear contrast between the old way of working and the new one. It suits a B2B SaaS product page where the buyer already feels the messy before and wants to see the after laid out plainly beside it. The item by item mirror lands harder than a single paragraph because the reader can scan one row at a time and recognise their own week in the before column.
A natural flow around it on a Marketing Pro page:
Before
After
The frame is built for one before and after contrast with the numbers underneath. A few ways to fill it:
Tip: keep the before and after lists the same length so the two panels sit at an equal height and the stat row lands on an even base.