Timeline
Vertical event lists with styled markers, contextual colours, and an optional centred layout.
Basic timeline
-
Order placed
Jan 12, 2026
-
Shipped
Jan 14, 2026
-
Delivered
Jan 16, 2026
<ul class="velin-timeline">
<li class="velin-timeline-item">
<span class="velin-timeline-marker"></span>
<div class="velin-timeline-content">
<h6>Order placed</h6>
<p class="text-muted">Jan 12, 2026</p>
</div>
</li>
<li class="velin-timeline-item">
<span class="velin-timeline-marker"></span>
<div class="velin-timeline-content">
<h6>Shipped</h6>
<p class="text-muted">Jan 14, 2026</p>
</div>
</li>
</ul>
Marker colors
Add .velin-timeline-marker-{color} for contextual marker colours.
<span class="velin-timeline-marker velin-timeline-marker-success"></span>
<span class="velin-timeline-marker velin-timeline-marker-warning"></span>
<span class="velin-timeline-marker velin-timeline-marker-danger"></span>
Centered layout
Add .velin-timeline-centered for alternating left/right items on wider screens.
<ul class="velin-timeline velin-timeline-centered">
<li class="velin-timeline-item">
<span class="velin-timeline-marker velin-timeline-marker-primary"></span>
<div class="velin-timeline-content">
<h6>Founded</h6>
<p>The company was established.</p>
</div>
</li>
<li class="velin-timeline-item">
<span class="velin-timeline-marker velin-timeline-marker-success"></span>
<div class="velin-timeline-content">
<h6>First Release</h6>
<p>Version 1.0 shipped to customers.</p>
</div>
</li>
</ul>