Search blocks by description or jump to a page.
Two columns of numbers placed side by side to contrast before and after results. Use it to show the lift your product delivers over the old way.
Comparison Metrics is a before-and-after stats section. A centered heading and short paragraph sit at the top, followed by a two-column grid of cards. Each card has three horizontal layers: a header row with an icon, a metric name, and a short description; a split body with the baseline figure on the left and the improved figure on the right; and a footer strip that shows the percentage gain or reduction in green. Below the grid sits a case study callout with a circular logo placeholder, a pull quote, and an attribution line. The section closes with a boxed call to action that holds two buttons.
The four metric cards, the badge text, the heading, and the subheading are all straightforward to swap. You can add or remove cards from the grid, change the before and after labels to suit your framing (industry average vs. your result, old process vs. new), and replace the case study copy and logo placeholder with a real customer. The CTA box buttons and their link targets are independent of the rest.
Reach for this block on a results or outcomes page where you need to show learners or buyers the measurable lift they can expect. It works well for an online education platform that wants to contrast learner outcomes before and after a course, or a certification product comparing pass rates against the self-study average. The split card format makes the gap between baseline and result immediately legible without a chart, which gives it an edge over a plain stats strip when the contrast itself is the story.
A natural flow around it on a Marketing (Legacy) page:
Before
After
This block is built for showing the measurable gap between a starting point and a better outcome. A few ways to use it:
Tip: keep the improvement label short, one phrase like "40% reduction" or "3x faster," so the footer strip stays tight and scannable.