<.dm_timeline id="timeline-single-default">
  <:item title="Order placed" time="2024-01-01" completed={true}>Order confirmed</:item>
  <:item title="Processing" time="2024-01-02" active={true}>In progress</:item>
  <:item title="Shipped" time="2024-01-03">Pending</:item>
  <:item title="Delivered">Pending</:item>
</.dm_timeline>

<.dm_timeline id="timeline-single-alternate" layout="alternate">
  <:item title="Step 1" completed={true}>Done</:item>
  <:item title="Step 2" active={true}>Current</:item>
  <:item title="Step 3">Pending</:item>
</.dm_timeline>

<.dm_timeline id="timeline-single-colored">
  <:item title="Success" color="success" completed={true}>Completed</:item>
  <:item title="Warning" color="warning" active={true}>In progress</:item>
  <:item title="Error" color="error">Failed</:item>
  <:item title="Tertiary" color="tertiary">Tertiary marker</:item>
  <:item title="Neutral" color="neutral" icon="clock-outline">Neutral marker with icon</:item>
  <:item title="Base" color="base">Base marker with dot</:item>
</.dm_timeline>

<.dm_timeline id="timeline-single-right-layout" layout="right">
  <:item title="Step 1" completed={true}>Done</:item>
  <:item title="Step 2" active={true}>Current</:item>
  <:item title="Step 3">Pending</:item>
</.dm_timeline>

<.dm_timeline id="timeline-single-horizontal-layout" layout="horizontal">
  <:item title="Start" completed={true}>Done</:item>
  <:item title="Middle" active={true}>Now</:item>
  <:item title="End">Pending</:item>
</.dm_timeline>

<.dm_timeline id="timeline-single-size-sm" size="sm">
  <:item title="Created" completed={true}>Project created</:item>
  <:item title="Updated" active={true}>In review</:item>
  <:item title="Deployed">Pending</:item>
</.dm_timeline>

<.dm_timeline id="timeline-single-size-lg" size="lg">
  <:item title="Design" completed={true}>Designs approved</:item>
  <:item title="Development" active={true}>In progress</:item>
  <:item title="Testing">Pending</:item>
</.dm_timeline>

<.dm_timeline id="timeline-single-with-loading">
  <:item title="Uploaded" completed={true}>File received</:item>
  <:item title="Processing" loading={true}>Analyzing data…</:item>
  <:item title="Done">Pending</:item>
</.dm_timeline>