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.
Search blocks by description or jump to a page.
The source for every Modern SaaS block is included with Basic and Pro. Pick a plan to copy the code.
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 or company history page where trust and credibility matter as much as features. For a fintech or banking product, a timeline of real moments such as regulatory approvals, launch dates, and growth numbers reads as proof of stability, which lands harder than a paragraph of general claims.
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 images.