Timeline-Komponente

Zuletzt aktualisiert: Juli 13, 2026

Nur CSS-Tailwind-CSS-Zeitleiste für chronologische Ereignislisten. Vertikales Layout mit Symbol-, Inhalts- und Verbindungslinienslots. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Zeitleistenkomponenten zeigen eine Abfolge von Ereignissen, Meilensteinen oder Erzählfortschritten in chronologischer Reihenfolge an. Mit semantischem HTML erstellte Zeitleisten helfen Benutzern, den historischen Fortschritt und die Projektphasen zu verstehen. Das Frutjam-Zeitleistensystem unterstützt mehrere Richtungen, Farben und Elementstile – ideal für den Projektverlauf, Versionshinweise und Reisekarten.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse	Typ	Beschreibung
timeline	Base	Geordnete Liste chronologischer Ereignisse
timeline-item	Modifikator	Einzelne Ereigniszeile – auf jedem `<li>` platzieren
timeline-start	Modifikator	Der Inhalt wird vor der Zeitleistenachse platziert
timeline-middle	Modifikator	Punkt zentriert auf der Zeitachse
timeline-end	Modifikator	Der Inhalt wird hinter der Zeitleistenachse platziert
timeline-horizontal	Modifikator	Horizontales Layout
timeline-vertical	Modifikator	Vertikales Layout (Standard)
timeline-snap-start	Modifikator	Blendet die Startspalte aus – der Punkt wird am linken Rand ausgerichtet
timeline-snap-end	Modifikator	Blendet die Endspalte aus – der Punkt wird am rechten Rand ausgerichtet
timeline-primary	Farbe	Primärfarbpunkt und Verbinder – auf `timeline-item` platzieren
timeline-secondary	Farbe	Sekundärer Farbpunkt und Verbinder – auf `timeline-item` platzieren
timeline-accent	Farbe	Akzentfarbpunkt und Verbinder – auf `timeline-item` platzieren
timeline-neutral	Farbe	Neutraler Farbpunkt und Verbinder – auf `timeline-item` platzieren
timeline-info	Farbe	Info-Farbpunkt und Verbinder – auf `timeline-item` platzieren
timeline-success	Farbe	Erfolgsfarbpunkt und Anschluss – auf `timeline-item` platzieren
timeline-warning	Farbe	Warnfarbpunkt und Anschluss – auf `timeline-item` platzieren
timeline-error	Farbe	Fehlerfarbpunkt und Anschluss – auf `timeline-item` platzieren

Grundlegende Verwendung

Jan 2024

Project started

Initial commit pushed
Apr 2024

Beta released

Open testing begins
Today

v2.0 launched

Tailwind v4 rewrite

<ul class="timeline timeline-vertical">
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Jan 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Project started</div>
      <div class="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Apr 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Beta released</div>
      <div class="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Today</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">v2.0 launched</div>
      <div class="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

<ul className="timeline timeline-vertical">
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Jan 2024</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">Project started</div>
      <div className="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Apr 2024</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">Beta released</div>
      <div className="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Today</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">v2.0 launched</div>
      <div className="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

<ul class="timeline timeline-vertical">
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Jan 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Project started</div>
      <div class="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Apr 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Beta released</div>
      <div class="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Today</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">v2.0 launched</div>
      <div class="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

Code anzeigen

Zeitleiste mit Farben

Fügen Sie jedem timeline-item einen Farbmodifikator hinzu, um seinen Punkt und die daran anschließende Verbindungslinie einzufärben.

Step 1

Primary
Step 2

Secondary
Step 3

Success
Step 4

Warning
Step 5

Error

<ul class="timeline timeline-vertical">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start text-sm opacity-60">Step 1</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Primary</div></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start text-sm opacity-60">Step 2</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Secondary</div></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start text-sm opacity-60">Step 3</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Success</div></div>
  </li>
  <li class="timeline-item timeline-warning">
    <div class="timeline-start text-sm opacity-60">Step 4</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Warning</div></div>
  </li>
  <li class="timeline-item timeline-error">
    <div class="timeline-start text-sm opacity-60">Step 5</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Error</div></div>
  </li>
</ul>

Code anzeigen

Abwechselnde Seiten

Wechseln Sie den Inhalt zwischen timeline-start und timeline-end für jedes Element, um ein Zickzack-Layout zu erstellen.

Design phase

Jan 2024
Development

Mar 2024
Testing

May 2024
Launch

Jun 2024

<ul class="timeline timeline-vertical">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Design phase</div>
      <div class="text-sm opacity-60">Jan 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Development</div>
      <div class="text-sm opacity-60">Mar 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-accent">
    <div class="timeline-start">
      <div class="font-semibold">Testing</div>
      <div class="text-sm opacity-60">May 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launch</div>
      <div class="text-sm opacity-60">Jun 2024</div>
    </div>
  </li>
</ul>

Code anzeigen

Zweifarbige Steckverbinder

Die Verbindungslinie jedes Elements erbt seine Farbe und schafft nahtlose Übergänge zwischen verschiedenfarbigen Schritten.

Planned

Backlog item created
In Progress

Development started
In Review

Awaiting approval
Done

Shipped to production

<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-info">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Planned</div>
      <div class="text-sm opacity-60">Backlog item created</div>
    </div>
  </li>
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">In Progress</div>
      <div class="text-sm opacity-60">Development started</div>
    </div>
  </li>
  <li class="timeline-item timeline-warning">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">In Review</div>
      <div class="text-sm opacity-60">Awaiting approval</div>
    </div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Done</div>
      <div class="text-sm opacity-60">Shipped to production</div>
    </div>
  </li>
</ul>

Code anzeigen

Nur Startseite

Platzieren Sie Inhalte nur in timeline-start mit einem leeren timeline-end, um alles nach links von der Achse zu verschieben.

Requirements gathered

Jan 2024
Prototype built

Feb 2024
Shipped

Mar 2024

<ul class="timeline timeline-vertical timeline-snap-end">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Requirements gathered</div>
      <div class="text-sm opacity-60">Jan 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start">
      <div class="font-semibold">Prototype built</div>
      <div class="text-sm opacity-60">Feb 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start">
      <div class="font-semibold">Shipped</div>
      <div class="text-sm opacity-60">Mar 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
</ul>

Code anzeigen

Nur Endseite

Verwenden Sie timeline-snap-start, um den Punkt an den linken Rand zu verschieben und den gesamten Inhalt auf der rechten Seite anzuzeigen.

Launched beta

February 2024
Public release

April 2024

<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
  </li>
</ul>

Code anzeigen

Rich-Card-Inhalt

Wickeln Sie den Inhalt in einen borderrounded-box p-3-Block ein, um jedem Timeline-Ereignis ein kartenähnliches Aussehen zu verleihen.

Jan 15, 2024

Project Kickoff

Team assembled, goals defined, and roadmap approved by stakeholders.
Mar 1, 2024

Alpha Released

Internal testing began with 12 pilot users across 3 departments.
Jun 10, 2024

v1.0 General Availability

Public launch with full documentation, support, and SLA guarantees.

<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Jan 15, 2024</div>
        <div class="font-semibold">Project Kickoff</div>
        <p class="text-sm opacity-70 mt-1">Team assembled, goals defined, and roadmap approved by stakeholders.</p>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Mar 1, 2024</div>
        <div class="font-semibold">Alpha Released</div>
        <p class="text-sm opacity-70 mt-1">Internal testing began with 12 pilot users across 3 departments.</p>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Jun 10, 2024</div>
        <div class="font-semibold">v1.0 General Availability</div>
        <p class="text-sm opacity-70 mt-1">Public launch with full documentation, support, and SLA guarantees.</p>
      </div>
    </div>
  </li>
</ul>

Code anzeigen

Schneller Start

Verwenden Sie timeline-snap-start in der Liste, um die Startspalte auszublenden und den Punkt am linken Rand auszurichten.

Launched beta

February 2024
Public release

April 2024

<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
  </li>
</ul>

Code anzeigen

Schnappende

Verwenden Sie timeline-snap-end in der Liste, um die Endspalte auszublenden und den Punkt am rechten Rand auszurichten.

Launched beta

February 2024
Public release

April 2024

<ul class="timeline timeline-vertical timeline-snap-end">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
</ul>

Code anzeigen

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Zeitleiste-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP

Timeline-Komponente

Grundlegende Verwendung

Zeitleiste mit Farben

Abwechselnde Seiten

Zweifarbige Steckverbinder

Nur Startseite

Nur Endseite

Rich-Card-Inhalt

Schneller Start

Schnappende

Verwandt