Custom Timeline Components
Horizontal Timeline
Preview
Code
Order Confirmed
2025-2-26 11:13 AM
Order Shipped
2025-2-26 11:13 AM
Out for Delivery
2025-2-26 11:13 AM
Order Delivered
2025-2-26 11:13 AM
Copy
<div class="timeline-container"> <div class="timeline" id="timeline"> <div class="timeline__track" id="progressTrack"></div> <div class="timeline__step timeline__step--completed"> <div class="timeline__step-icon"> <i data-lucide="check"></i> </div> <div class="timeline__step-content"> <div class="timeline__step-title">Order Confirmed<small>2025-2-26 11:13 AM</small></div> </div> </div> <div class="timeline__step timeline__step--completed"> <div class="timeline__step-icon"> <i data-lucide="box"></i> </div> <div class="timeline__step-content"> <div class="timeline__step-title">Order Shipped<small>2025-2-26 11:13 AM</small></div> </div> </div> <div class="timeline__step timeline__step--active"> <div class="timeline__step-icon"> <i data-lucide="truck"></i> </div> <div class="timeline__step-content"> <div class="timeline__step-title">Out for Delivery<small>2025-2-26 11:13 AM</small></div> </div> </div> <div class="timeline__step"> <div class="timeline__step-icon"> <i data-lucide="package-check"></i> </div> <div class="timeline__step-content"> <div class="timeline__step-title">Order Delivered<small>2025-2-26 11:13 AM</small></div> </div> </div> </div> </div>
Vertical Timeline
Preview
Code
Order Confirmed
2025-2-26 11:13 AM
Order Shipped
2025-2-26 11:13 AM
Out for Delivery
2025-2-26 11:13 AM
Order Delivered
2025-2-26 11:13 AM
Copy
<div class="timeline-container"> <div class="timeline timeline--vertical" id="timeline1"> <div class="timeline__track" id="progressTrack1"></div> <div class="timeline__step timeline__step--completed"> <div class="timeline__step-icon"> <i data-lucide="check"></i> </div> <div class="timeline__step-content"> <div class="timeline__step-title">Order Confirmed<small>2025-2-26 11:13 AM</small></div> </div> </div> <div class="timeline__step timeline__step--active"> <div class="timeline__step-icon"> <i data-lucide="box"></i> </div> <div class="timeline__step-content"> <div class="timeline__step-title">Order Shipped<small>2025-2-26 11:13 AM</small></div> </div> </div> <div class="timeline__step"> <div class="timeline__step-icon"> <i data-lucide="truck"></i> </div> <div class="timeline__step-content"> <div class="timeline__step-title">Out for Delivery<small>2025-2-26 11:13 AM</small></div> </div> </div> <div class="timeline__step"> <div class="timeline__step-icon"> <i data-lucide="package-check"></i> </div> <div class="timeline__step-content"> <div class="timeline__step-title">Order Delivered<small>2025-2-26 11:13 AM</small></div> </div> </div> </div> </div>