Timeline

A vertical sequence of events — a marker (dot or icon) on a connecting line, with a title / time / description per item. Per-item variant colours its marker. Shared size axis.

With icons

Order placed Mon 9:14 AM

We received your order.
Packed Mon 2:40 PM

Your items were packed.
Shipped Tue 8:05 AM

Handed to the carrier.
Out for delivery Wed

Arriving today.

<script>
  import { Timeline } from '@spaethtech/svelte-ui';
  const items = [
    { title: 'Order placed', time: 'Mon 9:14 AM', variant: 'success' },
    { title: 'Shipped', time: 'Tue 8:05 AM', variant: 'primary' },
  ];
</script>

<Timeline {items} />

Plain dots

Draft created 10:00
Sent for review 10:32

Assigned to Mia.
Approved 11:15