Blazor Timeline

A graphical representation for displaying a chronological sequence of events or milestones.

Basic Usage linkLink to this section

Display events chronologically in a vertical timeline with customizable points and content.

Orientation and Position linkLink to this section

The Orientation sets the timeline's alignment to horizontal or vertical. Use LinePosition in combination with Reverse to specify the position of <LabelContent> and <ChildContent> content with respect to the line.

Align Items linkLink to this section

Set the AlignItems property to <RadzenTimeLine> to specify the alignment of Timeline items' content, namely <PointContent>, <LabelContent> and <ChildContent> content.

Styling linkLink to this section

Use CSS variables to adjust line width and color.

Point Size linkLink to this section

Set the PointSize property to <RadzenTimeLineItem> to specify the item's point size.

Point Style linkLink to this section

Set the PointStyle property to <RadzenTimeLineItem> to change the item's point style.

Point Variant linkLink to this section

Set the PointVariant property to <RadzenTimeLineItem> to change the item's point variant.

Point Shadow linkLink to this section

Set the PointShadow property to <RadzenTimeLineItem> to specify the size of the item's point shadow.

Point Content linkLink to this section

The <PointContent> can fit in text and imagery.

• Example
• Edit Source

A

Text

alarm_on

RadzenIcon

RadzenGravatar

All the tools in one place

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

support

Dedicated support backed by proven expertise

palette

Premium themes and theme editor

widgets

Ready-to-use UI blocks

dashboard_customize

Complete app templates

format_shapes

Visual design-time-experience

Start Free See Subscription Plans

Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under MIT