Feature Timeline
A left aligned header above a vertical timeline of four numbered nodes, each carrying a capability title, a paragraph, and outcome chips.
A left aligned header above a vertical timeline of four numbered nodes, each carrying a capability title, a paragraph, and outcome chips.
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
Feature Timeline pairs a left aligned heading and subheading with a vertical timeline. Four numbered nodes run down a hairline spine, and each node opens a step: a capability title, a working paragraph that explains what happens at that stage, and a row of small outcome chips that name the concrete results. The section is purely typographic, with no images or mockups, and every surface draws from theme tokens.
The steps are one array of number, title, text, and chips, rendered in order down the spine. You can rewrite any step, add or remove chips, and lengthen or shorten the sequence, and the connecting line redraws to match. Because each step builds on the one above it, keep the order meaningful so the timeline reads as a system rather than a loose list of features.
Reach for this block when your capabilities are not a flat set but a sequence, where each layer depends on the one before and the payoff arrives at the end. It suits a product that takes a customer from intake to outcome, or any story best told as stages that stack. The vertical timeline makes that progression obvious without a diagram, which works well mid page after a hero has set the promise and before proof or pricing.
A natural flow around it on a Marketing Pro page:
Before
After
The natural fit is a capability sequence that compounds toward a result. A few other ways to use the frame:
Tip: write each title as the win of that stage, then let the chips carry the specifics so the spine stays easy to scan top to bottom.