Story With Before After Chart
A customer narrative and quote beside grouped bars comparing three metrics before and after Acme.
A customer narrative and quote beside grouped bars comparing three metrics before and after Acme.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
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.
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
After
The block is built for one customer whose results improved across a few measurable dimensions. A few other ways to use the frame:
Tip: keep the two bars in each group roughly proportional to the real values so readers who check the numbers find the chart honest.