---
title: Overview
position: 1
seo_title: Timeline Component
seo_description:  A timeline UI component visually presents events or steps in order, helping users track progress or understand sequences.
---
## Timeline Component 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. The Timeline component has a wide range of applications including timeline resumes, company roadmaps, event agendas, and more. 

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/layout/timeline/"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/timeline/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/layout/timeline/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/timeline"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/timeline"}],"demo":"components/timeline/overview","height":550}'></LiveDemo>

### Timeline UI Component 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:

<BlueprintImage data='{"description":"","labels":[{"text":"Timeline flag"},{"text":"Timeline card"},{"text":"Timeline date"},{"text":"Timeline"},{"text":"Timeline circle"}]}'>![A Telerik and Kendo UI Timeline component and its elements including the timeline flag, card, timeline date, timeline, and timeline circle.](images/components-timeline-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI Timeline component, including the timeline flag, card, timeline date, timeline, and timeline circle.")</BlueprintImage>

#### 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.

<BlueprintImage data='{"description":"","labels":[{"text":"Vertically oriented Timeline"},{"text":"Horizontally oriented Timeline"}]}'>![A Telerik and Kendo UI Timeline shown with a vertical and a horizontal orientation.](images/components-timeline-overview-layout.png "The Telerik and Kendo UI Timeline oriented horizontally and vertically.")</BlueprintImage>

#### 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).

<BlueprintImage data='{"description":"","labels":[{"text":"Alternating Mode - On"},{"text":"Alternating Mode - Off (default)"}]}'>![A vertically oriented Telerik and Kendo UI Timeline rendering events on both sides of the axis, and on one side of the axis.](images/components-timeline-overview-variants.png "The Telerik and Kendo UI Timeline showing events on one or both sides of the axis (available only in vertical orientation).")</BlueprintImage>

#### Timeline Card

The Telerik and Kendo UI Timeline can be used with a collapsible [Card](/components/card/) component to optimize space. When extended, the Card provides a more detailed event information. 

<BlueprintImage data='{"description":"","labels":[{"text":"Vertically oriented Timeline with an extended Card"},{"text":"Horizontally oriented Timeline with an extended Card"}]}'>![A vertically and a horizontally oriented Telerik and Kendo UI Timeline showing an extended, collapsible Card.](images/components-timeline-overview-timeline-card.png "The Telerik and Kendo UI Timeline relying on collapsible Cards to show additional event information.")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular Timeline","description":"Find more information about the Kendo UI for Angular Timeline in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/layout/timeline/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery Timeline","description":"Find more information about the Kendo UI for jQuery Timeline in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/timeline/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact Timeline","description":"Find more information about the KendoReact Timeline in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/layout/timeline/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core Timeline","description":"Find more information about the Telerik UI for ASP.NET Core Timeline component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/navigation/timeline/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC Timeline","description":"Find more information about the Telerik UI for ASP.NET MVC Timeline component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/navigation/timeline/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>