Timeline

A data-driven timeline of events. Bind [items] and the component renders a marker, title, description and an opposite-side timestamp for each one. Layout is configurable via orientation, align, reverse and selectable; every region can be overridden with a structural template directive (*bsTimelineMarker, *bsTimelineContent, *bsTimelineTimestamp). Items can also be authored declaratively as <mp-timeline-item> children.

Playground

Toggle each input below with a <bs-select> or <bs-checkbox> and watch the single live timeline — and the copyable snippet beneath it — update to match.

ReverseCustom markersCard content
2026-01-102026-02-022026-04-152026-05-01

Declarative authoring

Instead of binding [items], drop <mp-timeline-item> children directly inside <bs-timeline> and project into the named slots (opposite, content). Handy when each item's markup is bespoke rather than uniform.

2026-01-10KickoffProject scoping and team assembly.2026-01-102026-05-01Shipped v1First public release.2026-05-01