Blazor Timeline

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

Basic Usage link

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

Orientation and Position link

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 link

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

Styling link

Use CSS variables to adjust line width and color.

Point Size link

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

Point Style link

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

Point Variant link

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

Point Shadow link

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

Point Content link

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