1. Docs
2. Components
3. Data
4. Timeline

Timeline 1.2.2

Vertical event lists with styled markers, contextual colours, and an optional centred layout. Pure CSS — no web component. Deutsch: Zeitleiste

When to use

• Chronological histories (orders, activity feeds, product milestones).
• When a vertical spine with markers communicates sequence better than a table.

When not

• Interactive multi-step flows the user advances — use Stepper.
• Dense tabular data — use tables / Data table.
• There is no <velin-timeline> element; use the BEM classes below.

Basic timeline

<ul class="velin-timeline">
  <li class="velin-timeline__item">
    <span class="velin-timeline__marker" aria-hidden="true"></span>
    <div class="velin-timeline__content">
      <div class="velin-timeline__title">Order placed</div>
      <div class="velin-timeline__date">Jan 12, 2026</div>
    </div>
  </li>
</ul>

Marker colors

Add .velin-timeline__marker--success, --warning, --danger, or --info.

<span class="velin-timeline__marker velin-timeline__marker--success" aria-hidden="true"></span>
<span class="velin-timeline__marker velin-timeline__marker--warning" aria-hidden="true"></span>
<span class="velin-timeline__marker velin-timeline__marker--danger" aria-hidden="true"></span>

Centered layout

Add .velin-timeline--centered for alternating left/right content on wider screens.

<ul class="velin-timeline velin-timeline--centered">
  <li class="velin-timeline__item">
    <span class="velin-timeline__marker" aria-hidden="true"></span>
    <div class="velin-timeline__content">
      <div class="velin-timeline__title">Founded</div>
      <p class="velin-timeline__text">The company was established.</p>
    </div>
  </li>
</ul>

Accessibility

• Prefer a semantic list (<ul>/<ol>) so assistive tech announces related events.
• Keep meaningful text in __title / __date / __text; mark decorative markers aria-hidden="true".
• Do not encode status only in marker colour — include words in the content.

API (CSS)

Best practices & pitfalls

• Use the double-underscore BEM names (__item, __marker) — hyphenated -item aliases are not in the stylesheet.
• Keep dates machine-friendly in content when sorting or filtering is needed.

Related

• Stepper
• List Group
• Progress