About this block

Timeline With Metrics is a case study told in sequence. Under a heading and lede, a vertical timeline runs down a hairline rule with a node for each milestone: a date in small caps, a metric chip, a bold title, and a sentence of context. The story closes with a three tile results band that totals up the rollout. Everything is type, borders, and chips, no images, so the block stays light and theme proof.

The milestones and the closing stats are two plain arrays, so the timeline stretches from three to six nodes without layout edits. Each metric chip is just a string, which keeps the numbers attached to the moments that produced them, the thing a summary stats block cannot do.

When to use

Reach for this block when the objection you fight is how painful is the switch. A dated rollout with numbers at each step answers slow, risky, and disruptive all at once. It beats quote-led-story when process is the proof, and growth-chart-story when progress came in steps rather than a smooth curve. For several customers at once, story-grid or logo-rows-with-results cover more ground in less depth.

A natural flow around it on a Marketing Pro page:

Before

• Comparisons so the switch the timeline describes already feels justified

After

• FAQs to catch the remaining migration questions
• CTAs with a migration offer while confidence is high

What you can display

One strong use is a migration rollout from import to switch off. Other sequences that fit:

• Enterprise onboarding. Security review, pilot team, full rollout, renewal, with seat counts as the chips.
• Agency engagement. Audit, quick wins, system build, handoff, with client results at each phase.
• Product launch. Beta, early access, general release, first thousand customers, dated like a changelog.

Tip: put a real unit in every chip, zero downtime and dollars saved persuade where vague improvement chips just decorate.