Search blocks by description or jump to a page.
A centered header above two matched panels, a muted before column and a highlighted after column listing the same tasks with new time costs.
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 centers a heading and a one line subheading over two matched panels. The left panel wears a muted background and a Before badge, listing five familiar tasks with a cross icon and a time cost for each. The right panel is raised with a shadow and an After badge, listing the same five tasks reworked, each with a check icon and its new, shorter duration. A single summary line sits centered beneath both panels to tie the comparison together.
The two panels are parallel arrays of task and cost, so they read as a row by row before and after. You can rewrite the tasks, swap the time figures, and change the summary line without touching the layout. Keep the two lists the same length and in the same order so each old task lines up against its improved counterpart down the columns.
Reach for this block when the strongest argument for your product is the gap between how work felt before and how it feels now. It fits any switching story where the old way was slow, manual, or scattered, and the new way collapses that effort into minutes. The paired panels make the contrast concrete without a chart, which works well mid page once a hero has named the promise and you want to prove the change is real.
A natural flow around it on a Marketing Pro page:
Before
After
The natural fit is one workflow timed the old way and the new way. A few other ways to use the frame:
Tip: keep the two columns the same length and order so every before task reads straight across to the after that replaces it.