Story With Before After Chart

About this block

Story With Before After Chart is a two-column case study. The left column carries a company name in a semibold label, a heading that states the outcome, two short narrative paragraphs, and a ruled quote figure with an avatar, a name, and a role. The right column is a bordered chart card: a grouped bar chart built from plain divs, with three metric groups of two bars each and a two chip legend that maps the light and solid bars to the before and after states.

Every bar group lives in one array entry holding a label, the before and after display values, and the two bar heights, so you can retell the story with different numbers without touching the layout. The company name, heading, paragraphs, and quote are independent copy strings, and the legend labels are plain text you can rename to match any comparison, such as last year versus this year.

When to use

Use this block when the most persuasive part of a customer story is the contrast between life before the product and life after it. It is a stronger choice than Metrics Spotlight when single numbers need a baseline to feel impressive, and a stronger choice than Quote Led Story when the data deserves equal billing with the testimonial. Reach for Results Table instead when you have many metrics and the visual comparison would get crowded.

A natural flow around it on a Marketing Pro page:

Before

• A Heroes block to set the product promise that this story will prove
• Features to explain the capabilities behind the improvement

After

• Testimonials to widen the proof from one customer to many voices
• A CTAs block to convert readers while the comparison is fresh

What you can display

The block is built for one customer whose results improved across a few measurable dimensions. A few other ways to use the frame:

• A migration story. Compare lead volume, campaign throughput, and response rates from the quarter before the switch to the quarter after, and let the narrative explain what changed.
• A team productivity gain. Chart hours spent on reporting, time to launch, and review cycles, with the quote confirming that the gains held up after the novelty wore off.
• A seasonal benchmark. Use the legend to label two comparable periods, such as this holiday season against the last one, so growth reads as repeatable rather than lucky.

Tip: keep the two bars in each group roughly proportional to the real values so readers who check the numbers find the chart honest.