Story Grid
Three story cards each showing a wordmark, a bold result, a summary, and a read link.
Three story cards each showing a wordmark, a bold result, a summary, and a read link.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Story Grid opens with a centered heading and a short supporting sentence, then flows into a three column card grid below. Each card holds a company name at the top, an oversized primary colored result number with a short label underneath it, a one or two sentence summary, and a "Read the story" link with an arrow icon. The cards sit at equal height and the grid collapses to two columns on tablet and one column on mobile.
Every piece of content is independent. The heading and subheading are standalone text, so you can rewrite them without touching the cards. The card array drives the grid, so you can add or remove stories freely and the layout adjusts. Each card's result, label, summary, and link are all separate fields.
This layout fits a social proof section on a project management or productivity tool's marketing page, where you want to show several customer wins at a glance without committing a full page to any one story. It works better than a single featured story when you have three or more customers with distinct outcomes worth highlighting side by side, and better than a carousel when you want all cards visible at once without requiring interaction.
A natural flow around it on a Marketing Pro page:
Before
After
Each card is built around one headline result, which makes this grid best suited to outcomes you can express as a single bold number or timeframe. A few ways to populate it:
Tip: keep the three result labels short enough to read in one glance so the oversized numbers stay the visual anchor on each card.