C&C Docs
Log in

cnc-timeline

A vertical sequence of dated events — an order history, an audit trail, a changelog. Unlike cnc-steps it describes what HAPPENED rather than where the user is.

Quick start

Bind an array to steps. Each entry takes a title, a date and some content.

Order placed
Jan 4, 2026
Payment authorised.
Dispatched
Jan 6, 2026
Left the warehouse.
Delivered
Jan 9, 2026
Signed for by A. Lovelace.
 
<cnc-timeline
  $steps="[
    { title: 'Order placed', date: '2026-01-04', content: 'Payment authorised.' }
  ]"
></cnc-timeline>

Step fields

Field Purpose
title The event's heading.
date A date string. Parsed and reformatted as "Jan 4, 2026"; anything unparseable is shown verbatim, so a pre-formatted string passes through unharmed.
content The body text under the title.
label An additional marker on the entry.

Usage guidance

Sort the array yourself. Entries render in the order given and the widget never reorders them, so a history assembled from several sources needs sorting before it is bound — otherwise the dates read out of sequence with no warning.

Dates are reformatted to a fixed US pattern with no way to change it — format is declared and unused. Where a locale matters, format the string yourself: an unparseable value is passed through as written, which makes that the supported route.

Use cnc-steps for a process the user is moving THROUGH and this for events that have already happened. The two look similar and answer different questions.

← Back to Widgets