Overview of the Timeline Component | Progress Design System

Timeline Overview

The Timeline component provides structure and context to time-related data, and facilitates content comprehension. It is used to arrange events in chronological succession. It has a wide range of applications including timeline resumes, company roadmaps, event agendas, and more.

Live Demo

Variant

VerticalHorizontal

jQuery React ASP.NET Core ASP.NET MVC

Appearance

The Timeline provides built-in styling options that grant visually appealing and flexible rendering experience.

Apart from the default vision of the Telerik and Kendo UI Timeline, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.

Anatomy

The anatomy of the Timeline summarizes the elements of the component:

A Telerik and Kendo UI Timeline component and its elements including the timeline flag, card, timeline date, timeline, and timeline circle.

Timeline flag
Timeline card
Timeline date
Timeline
Timeline circle

Layout

The Telerik and Kendo UI Timeline can appear both in horizontal and vertical orientations. The layout of the timeline card can be set both to vertical and horizontal.

A Telerik and Kendo UI Timeline shown with a vertical and a horizontal orientation.

Vertically oriented Timeline
Horizontally oriented Timeline

Alternating Mode

The vertical layout of the Telerik and Kendo UI Timeline can render events either on both sides of the axis, or on one side (default).

A vertically oriented Telerik and Kendo UI Timeline rendering events on both sides of the axis, and on one side of the axis.

Alternating Mode - On
Alternating Mode - Off (default)

Timeline Card

The Telerik and Kendo UI Timeline can be used with a collapsible Card component to optimize space. When extended, the Card provides a more detailed event information.