Story Timeline
A vertical 'Our story' timeline of company milestones, alternating a photo with the year and a short paragraph beside a center rail, with the most recent year highlighted.
A vertical 'Our story' timeline of company milestones, alternating a photo with the year and a short paragraph beside a center rail, with the most recent year highlighted.
The Modern SaaS Collection unlocks the source for every Modern SaaS block. All Access unlocks every Collection.
Already purchased? Log in
Story Timeline is an "Our story" about section. A centered header sits above a vertical timeline of milestones, one per year. A single rail runs down the center on larger screens (and down the left edge on mobile), and each milestone hangs a dot on the rail, then alternates a photo on one side with the year and a short paragraph on the other. The most recent year's dot is filled and ringed, so a reader sees where the story stands today at a glance.
The header and the milestones are independent, so you can rewrite the copy, add or remove years, or swap the photos without touching the rest. Every node and rule is built from theme tokens on a normal surface, so the block adapts to light and dark and never flips its own background.
Reach for this block on an about page, a company page, or the lower half of a landing page where you want to build trust by showing how far the product has come. A timeline of real moments reads as proof of momentum, which lands harder than a single paragraph of history.
A natural flow around it on a Modern SaaS page:
Before
After
The obvious fit is your company history, oldest year first, each with a photo and a line about what shipped. A few other ways to use the frame:
Tip: keep each paragraph to two short sentences and use photos with a consistent look, so the timeline reads as one continuous story rather than a grid of unrelated stock images.