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.

Process Tracker linkLink to this section

Set LineStyle on an item to style the connector running from it to the next item, so a timeline can show how far a process has got. Mark the step in progress with Current, which draws a ring in the point's own colour and renders it as aria-current="step". For styling the marker beyond what PointStyle and PointVariant express, PointClass adds your own classes to it. The line runs under the points by default, so a thick one reads as a track behind them; set --rz-timeline-line-gap (to calc(var(--rz-timeline-point-size) / 2) here) to hold it off the points instead, which is what a translucent or tinted point needs.

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