Skip to main content
VelinStyle v0.8.0
⌂ Home
  1. Docs
  2. Components
  3. Timeline

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>

Theme wählen