Search blocks by description or jump to a page.
A timeline that reveals product features step by step as buyers scroll. Good for guiding readers through a journey from first use to results.
Timeline Feature Showcase opens with a centered heading, a badge, and a short paragraph that frames the journey a reader is about to follow. Below that, a vertical connector rail runs down the center of the page on wider screens. Each step hangs off that rail as a two-column row: one side holds a bordered, rounded image and the other holds a card with an icon badge, a bold title, a description, and a small numbered step badge. Odd and even rows mirror left and right so the images alternate sides as the reader scrolls. A summary card at the bottom closes the sequence with a heading, a closing sentence, and two buttons.
The block ships with five steps, but you can add or remove entries freely since they are driven by a plain array. The badge label, section heading, and intro paragraph are all standalone copy. The closing card, its icon, and its two calls to action are independent of the timeline rows and can be removed or rewritten without touching the step logic.
Reach for this block when you want to walk a prospective student or learner through a course journey, a certification path, or a skill progression before they enroll. The alternating image layout gives each phase visual weight, so it suits a product page where the process itself is a selling point rather than just a list of features. It outperforms a simple grid when order and narrative arc matter, and it outperforms a plain accordion when imagery carries equal weight alongside the copy.
A natural flow around it on an Ecommerce page:
Before
After
The clearest fit is a multi-stage product process where each phase has a distinct image and a concise explanation. A few other directions work well:
Tip: keep each step description to two or three short sentences so the cards stay balanced and the rail maintains a steady visual rhythm as readers scroll.