Timeline
stable 2 kB<hk-timeline>An event rail, vertical or horizontal, with a marker per tone. Built as an ordered list, because that is what a chronology is.
#events#history
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| events | HkTimelineEvent[] | [] | Events in order, each with a time, title and tone. |
| orientation | 'vertical' | 'horizontal' | 'vertical' | Rail direction. |
| markerTemplate | TemplateRef | null | null | Replaces the default dot. |
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-timeline-rail | #e2e8f0 | Connecting line. |
| --hk-timeline-dot | #dc2626 | Default marker colour. |
Accessibility
- Rendered as an ordered list so sequence is conveyed structurally, not just visually.
- Times use a <time datetime> element, making them machine-readable.