Story Accordion
Four customer stories in a bordered accordion where each trigger pairs a wordmark with a metric chip and opens to a summary and stats.
Four customer stories in a bordered accordion where each trigger pairs a wordmark with a metric chip and opens to a summary and stats.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Story Accordion stacks four customer stories inside a single bordered accordion. Each trigger row pairs a styled wordmark and an industry line with the headline metric shown as a rounded chip, so the closed list already reads as a scannable results summary. Expanding a row reveals a short narrative, two supporting stats set side by side, and a link to the full story. The first item ships open so the section never starts empty.
The stories live in one array, so you can add, reorder, or remove rows and rewrite any summary, metric, or stat without touching the others. Each wordmark carries its own type treatment, which lets real brand lockups sit next to one another. Because the layout is a single accordion, the section stays compact no matter how many stories you include.
Reach for this block when you have several strong customer stories and limited vertical space to show them. The collapsed list lets a visitor scan every company and its headline number at a glance, then open only the one that matches their situation. It is a better fit than a story grid when the page already carries a lot of proof and you want the detail available on demand rather than always on screen.
A natural flow around it on a Marketing Pro page:
Before
After
Each row holds one complete customer story. A few ways to fill the slots:
Tip: keep every headline metric in the same shape, a value and a short unit, so the chips read as one consistent column down the closed list.