Zeitleiste 1.2.0

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

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Foundation wo vermerkt.

Wann verwenden

Chronologische Historien (Bestellungen, Activity Feeds, Produktmeilensteine).
Wenn eine vertikale Achse mit Markern die Reihenfolge besser vermittelt als eine Tabelle.

Wann nicht

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

Basis-Zeitleiste

Bestellung aufgegeben

Jan 12, 2026
Versendet

Jan 14, 2026
Zugestellt

Jan 16, 2026

<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>

Markerfarben

Füge .velin-timeline__marker--success, --warning, --danger oder --info hinzu.

<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>

Zentriertes Layout

Füge .velin-timeline--centered für abwechselnd links/rechts angeordnete Inhalte auf breiteren 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>

Barrierefreiheit

Bevorzuge eine semantische Liste (<ul>/<ol>), damit Assistive Tech zusammengehörige Ereignisse ansagt.
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)

Klasse	Rolle
`.velin-timeline`	Root-Liste
`.velin-timeline__item`	Ereigniszeile
`.velin-timeline__marker` (+ `--success` / `--warning` / `--danger` / `--info` / `--icon`)	Achsenmarker
`.velin-timeline__content`, `__title`, `__date`, `__text`	Kopierstruktur
`.velin-timeline--centered`	Alternierendes Layout

Best Practices & Fallstricke

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.