Timeline

Basic

Register
Payment
10/23/2023
Analysis
10/23/2023
Just checking
Prepare
Prepare to ship
Shipment
It is shiped :)
{{-- Cut top edge with `first` --}}
<x-timeline-item title="Register" first />
 
<x-timeline-item title="Payment" subtitle="10/23/2023" />
 
<x-timeline-item title="Analysis" subtitle="10/23/2023" description="Just checking" />
 
{{-- Notice `pending` --}}
<x-timeline-item title="Prepare" pending description="Prepare to ship" />
 
{{-- Cut bottom edge with `last` --}}
<x-timeline-item title="Shipment" pending last description="It is shiped :)" />

Icons

Order placed
Payment confirmed
Shipped
Delivered
<x-timeline-item title="Order placed" first icon="o-map-pin" />
 
<x-timeline-item title="Payment confirmed" icon="o-credit-card" />
 
<x-timeline-item title="Shipped" icon="o-paper-airplane" />
 
<x-timeline-item title="Delivered" pending last icon="o-gift" />

maryUI
Sponsor