Timeline
Displays a list of events in chronological order
Divergence from Blok
Composable: previous Title/Description string parameters replaced by composable sub-components. The old TimelineItem hardcoded a marker dot, a connector line, and Title/Description as strings. To match Blok, you now compose TimelineSeparator (column on the left containing TimelineIndicator and TimelineConnector) and TimelineContent (column on the right containing TimelineTitle, TimelineDescription, and any rich content). All sub-components also support `ClassName` overrides and additional Blazor parameters not in Blok where it adds flexibility.
Examples
Default
Project kickoff
The team gathered to define goals and scope for the new platform.
Design review
Wireframes and mockups were presented and approved.
Development sprint
Core features were implemented across frontend and backend services.
Launch day
The platform went live and was made available to all users.
Indicator variants
Solid indicator
Outline indicator + dashed connector
Subtle indicator (last item, no connector)
With rich content (Cards, Badges, icons)
Feature released
v2.4.0 Released
Includes dark mode support and improved table performance.
Status update
DeployedBug reported
Issue #342
Sidebar navigation fails to collapse on mobile viewports.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Timeline | Root container for a vertical list of TimelineItem children. Controls the shared vertical rhythm between items. |
| TimelineItem | A single row in the Timeline. Lays out a TimelineSeparator and a TimelineContent side by side. |
| TimelineSeparator | The left column of a TimelineItem. Holds a TimelineIndicator and an optional TimelineConnector that draws the vertical line down to the next item. |
| TimelineIndicator | The marker dot / icon bubble in a TimelineSeparator. Accepts an icon as child content and varies shape/weight via Variant. |
| TimelineConnector | Vertical line drawn below a TimelineIndicator to join it to the next item. Omit on the last TimelineItem. |
| TimelineContent | The right column of a TimelineItem. Stacks TimelineTitle, TimelineDescription, and any rich content. |
| TimelineTitle | Heading line in a TimelineContent. Renders as a <p> with medium weight. |
| TimelineDescription | Secondary body text in a TimelineContent. Renders as a small muted <p>. |
Timeline
Root container for a vertical list of TimelineItem children. Controls the shared vertical rhythm between items.
| Property | Type | Required | Description |
|---|---|---|---|
| Size | TimelineSize | Vertical rhythm between items. Default: TimelineSize.Md. Other values: Sm, Lg. | |
| ClassName | string? | Extra CSS classes appended to the root container. | |
| ChildContent | RenderFragment? | The timeline's items. Usually one or more TimelineItem. |
TimelineItem
A single row in the Timeline. Lays out a TimelineSeparator and a TimelineContent side by side.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the item wrapper. | |
| ChildContent | RenderFragment? | Should contain one TimelineSeparator and one TimelineContent. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the item wrapper. |
TimelineSeparator
The left column of a TimelineItem. Holds a TimelineIndicator and an optional TimelineConnector that draws the vertical line down to the next item.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the separator column. | |
| ChildContent | RenderFragment? | Usually a TimelineIndicator followed by an optional TimelineConnector. |
TimelineIndicator
The marker dot / icon bubble in a TimelineSeparator. Accepts an icon as child content and varies shape/weight via Variant.
| Property | Type | Required | Description |
|---|---|---|---|
| Variant | TimelineIndicatorVariant | Visual style. Default: TimelineIndicatorVariant.Solid. Other values: Outline, Subtle, Plain. | |
| Size | TimelineIndicatorSize | Indicator diameter. Default: TimelineIndicatorSize.Sm. Other values: Md, Lg. | |
| ClassName | string? | Extra CSS classes appended to the indicator. | |
| ChildContent | RenderFragment? | Optional icon or badge rendered inside the indicator. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the indicator. |
TimelineConnector
Vertical line drawn below a TimelineIndicator to join it to the next item. Omit on the last TimelineItem.
| Property | Type | Required | Description |
|---|---|---|---|
| Variant | TimelineConnectorVariant | Line style. Default: TimelineConnectorVariant.Solid. Other values: Dashed, Dotted. | |
| ClassName | string? | Extra CSS classes appended to the connector. |
TimelineContent
The right column of a TimelineItem. Stacks TimelineTitle, TimelineDescription, and any rich content.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the content column. | |
| ChildContent | RenderFragment? | The item's body — usually a TimelineTitle, a TimelineDescription, and/or arbitrary markup. |
TimelineTitle
Heading line in a TimelineContent. Renders as a <p> with medium weight.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the title. | |
| ChildContent | RenderFragment? | Title text or inline markup. |
TimelineDescription
Secondary body text in a TimelineContent. Renders as a small muted <p>.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the description. | |
| ChildContent | RenderFragment? | Description text or inline markup. |