Timelines

Timelines visually represent events along the time.

Usage

Timelines are series of events placed in a timeline. Each event is composed by a point placed in the line a panel to describe the event to the right or left of the point.

The point can be any kind of identifier. We recommend the default one, circle, but it can be the case of events related to people where you might prefer to use a user identifier.

Variations

Default

The icons are aligned to the left side of the screen.

Right timeline

The icons are aligned to the right side of the screen.

Center timeline

The icons are aligned to the center of the screen.

Even/odd timeline

Being in the center the panel can appear in alternate positions starting on the left side for even configuration and starting on the right for odd configuration.

Timeline Even

Timeline Odd

Right XS Timeline only

On window resize to mobile viewport (<768), the timeline icon are always aligned to the left. In case you want to place on the right, it is also possible with this example.