Timeline
Timeline display
Overview
Renders a timeline of milestone cards in a horizontally scrollable carousel. The number of visible cards adjusts responsively (1 on mobile, 2 on tablet, 3 on desktop). Prev/next buttons navigate the carousel.
Usage
import { Timeline } from "@leanicon/web-builder-library";Default
Full timeline with heading, subheading, description, and six milestone cards.
A story of leadership,
experience and trust
Discover how, since 2018, we have become one of Europe's leading scaleups known for maturity, growth potential, and technological innovation.
Company is founded
We started with a clear purpose: to transform the industry through technology and innovation.
First major milestone
In just one year, we achieved record growth and expanded our team to over 50 people.
We reached €30 million in revenue
In just two years, we achieved record annual revenue for such a young company.
International expansion
We expanded to Spain's second-largest city to strengthen our model nationwide.
Series B funding
We raised €50 million to accelerate growth and invest in cutting-edge technology.
Market leader
Recognized as one of Europe's leading scaleups known for maturity and innovation.
Without description
Heading and subheading only — no description paragraph.
A story of leadership,
experience and trust
Company is founded
We started with a clear purpose: to transform the industry through technology and innovation.
First major milestone
In just one year, we achieved record growth and expanded our team to over 50 people.
We reached €30 million in revenue
In just two years, we achieved record annual revenue for such a young company.
International expansion
We expanded to Spain's second-largest city to strengthen our model nationwide.
Few items
Two items — navigation buttons disabled at boundaries.
Our journey
so far
Company is founded
We started with a clear purpose: to transform the industry through technology and innovation.
First major milestone
In just one year, we achieved record growth and expanded our team to over 50 people.
Single item
The beginning
where it all started
Company is founded
We started with a clear purpose: to transform the industry through technology and innovation.
With animation
Staggered slide-up entrance for items and smooth slide transition.
A story of leadership,
experience and trust
Discover how, since 2018, we have become one of Europe's leading scaleups known for maturity, growth potential, and technological innovation.
Company is founded
We started with a clear purpose: to transform the industry through technology and innovation.
First major milestone
In just one year, we achieved record growth and expanded our team to over 50 people.
We reached €30 million in revenue
In just two years, we achieved record annual revenue for such a young company.
International expansion
We expanded to Spain's second-largest city to strengthen our model nationwide.
Series B funding
We raised €50 million to accelerate growth and invest in cutting-edge technology.
Market leader
Recognized as one of Europe's leading scaleups known for maturity and innovation.
Dark mode
A story of leadership,
experience and trust
Discover how, since 2018, we have become one of Europe's leading scaleups known for maturity, growth potential, and technological innovation.
Company is founded
We started with a clear purpose: to transform the industry through technology and innovation.
First major milestone
In just one year, we achieved record growth and expanded our team to over 50 people.
We reached €30 million in revenue
In just two years, we achieved record annual revenue for such a young company.
International expansion
We expanded to Spain's second-largest city to strengthen our model nationwide.
Series B funding
We raised €50 million to accelerate growth and invest in cutting-edge technology.
Market leader
Recognized as one of Europe's leading scaleups known for maturity and innovation.
Without description — dark mode
A story of leadership,
experience and trust
Company is founded
We started with a clear purpose: to transform the industry through technology and innovation.
First major milestone
In just one year, we achieved record growth and expanded our team to over 50 people.
We reached €30 million in revenue
In just two years, we achieved record annual revenue for such a young company.
Few items — dark mode
Our journey
so far
Company is founded
We started with a clear purpose: to transform the industry through technology and innovation.
First major milestone
In just one year, we achieved record growth and expanded our team to over 50 people.
Props
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Main heading text (required) |
|
| — | Light-weight text below heading (required) |
|
| — | Optional paragraph below the heading |
|
| — | Array of milestone items (required) |
|
| — | Animation config for items and slide transition |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
TimelineItem
Field | Type | Description |
|---|---|---|
|
| Year badge label (required) |
|
| Milestone title (required) |
|
| Milestone description (required) |
|
| Milestone image (required) |
TimelineAnimation
Field | Type | Description |
|---|---|---|
|
| Stagger animation for item entrance |
|
| Smooth transition when navigating between slides |
Notes
- Responsive items-per-view: 1 on mobile, 2 on tablet, 3 on desktop — computed from
window.innerWidthand updates on resize. - Navigation buttons are disabled when at the start or end of the list.
- Animation is disabled automatically when the user prefers reduced motion.
- Dark mode: pass
colorScheme="dark"or place inside a.darkancestor.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
heading | string | — | No | The CMS drives the header through the shared `sectionHeader` group now, so a block never passes these. They stay optional rather than deleted because Storybook and the SaaS showcase demo render this component standalone and still supply their own title. |
subheading | string | — | No | |
description | string | — | No | |
items | TimelineItem[] | — | Yes | |
animation | TimelineAnimation | — | No | |
colorScheme | enum | — | No | |
className | string | — | No |