CP Registry

Timeline

Vertikale Prozess- und Phasen-Visualisierung mit Status-Knotenpunkten. Zeigt Förderantrag-Schritte, Projekt-Roadmaps und OePNV-Ausbauphasen klar und nachvollziehbar.

Förderantrag-Phasen

Der klassische Anwendungsfall: Schritte eines KfW- oder BMUV-Förderantrags mit Status.

KfW-Förderantrag Schritt für Schritt

Vier Phasen mit done/active/upcoming-Status.

  1. Schritt 1

    Kostenfreie Erstberatung

    Energieberater bewertet Ihr Gebäude und empfiehlt passende KfW-Programme.

  2. Schritt 2

    Antrag im KfW-Portal

    Online-Antrag mit Kostenvoranschlag des Fachbetriebs einreichen.

  3. Schritt 3

    Prüfung und Bewilligung

    KfW prüft den Antrag. Baubeginn erst nach Bewilligung.

  4. Schritt 4

    Maßnahme umsetzen

    Fachbetrieb installiert die Wärmepumpe oder Solaranlage.

  5. Schritt 5

    Auszahlung

    Nach Einreichung der Abschlussrechnung wird der Zuschuss ausgezahlt. 

<Timeline label="KfW-Förderantrag Phasen">
  <TimelineItem
    time="Schritt 1"
    title="Kostenfreie Erstberatung"
    description="Energieberater bewertet Ihr Gebäude und empfiehlt passende KfW-Programme."
    status="done"
  />
  <TimelineItem
    time="Schritt 2"
    title="Antrag im KfW-Portal"
    description="Online-Antrag mit Kostenvoranschlag des Fachbetriebs einreichen."
    status="done"
  />
  <TimelineItem
    time="Schritt 3"
    title="Prüfung und Bewilligung"
    description="KfW prüft den Antrag. Baubeginn erst nach Bewilligung."
    status="active"
  />
  <TimelineItem
    time="Schritt 4"
    title="Maßnahme umsetzen"
    description="Fachbetrieb installiert die Wärmepumpe oder Solaranlage."
    status="upcoming"
  />
  <TimelineItem
    time="Schritt 5"
    title="Auszahlung"
    description="Nach Einreichung der Abschlussrechnung wird der Zuschuss ausgezahlt."
    status="upcoming"
    last
  />
</Timeline>

OePNV-Ausbau-Roadmap

Zeigt Bauphasen und Meilensteine bei laengeren Projekten — hier der Ausbau einer Stadtbahnlinie.

Stadtbahn-Ausbau Linie 7

  1. 2022

    Planfeststellung abgeschlossen

  2. 2023

    Förderantrag bewilligt

  3. 2024

    Baubeginn Nordabschnitt

  4. 2025

    Inbetriebnahme Nordabschnitt

  5. 2026

    Baubeginn Suedabschnitt

  6. 2027

    Vollständige Eröffnung 

<Timeline label="Stadtbahn-Ausbau Linie 7 — Zeitplan">
  <TimelineItem time="2022" title="Planfeststellung abgeschlossen" status="done" />
  <TimelineItem time="2023" title="Förderantrag bewilligt" status="done" />
  <TimelineItem time="2024" title="Baubeginn Nordabschnitt" status="done" />
  <TimelineItem time="2025" title="Inbetriebnahme Nordabschnitt" status="active" />
  <TimelineItem time="2026" title="Baubeginn Suedabschnitt" status="upcoming" />
  <TimelineItem time="2027" title="Vollständige Eroefffnung" status="upcoming" last />
</Timeline>

Kommunales Klimakonzept

Neun Maßnahmen des staedtischen Klimaschutzprogramms 2030 — kompakte Schritt-Darstellung.

Klimaschutzprogramm Musterstadt 2030

  1. Maßnahme 1

    100% Oekostrom für Stadtgebaeude

  2. Maßnahme 2

    Photovoltaik-Offensive auf Schuldaechern

  3. Maßnahme 3

    Umstellung Busflotte auf Elektro

  4. Maßnahme 4

    Ausbau Radwegenetz 80 km

  5. Maßnahme 5

    Fernwärme CO₂-neutral 

<Timeline label="Klimaschutzprogramm Musterstadt 2030">
  <TimelineItem time="Maßnahme 1" title="100% Oekostrom für Stadtgebaeude" status="done" />
  <TimelineItem time="Maßnahme 2" title="Photovoltaik-Offensive auf Schuldaechern" status="done" />
  <TimelineItem time="Maßnahme 3" title="Umstellung Busflotte auf Elektro" status="active" />
  <TimelineItem time="Maßnahme 4" title="Ausbau Radwegenetz 80 km" status="upcoming" />
  <TimelineItem time="Maßnahme 5" title="Fernwärme CO₂-neutral" status="upcoming" last />
</Timeline>

Redakteurshinweise

Wann einsetzen

  • Förderantrag-Prozesse mit 3–8 Schritten
  • Projekt-Roadmaps mit Jahres-Meilensteinen
  • Onboarding-Flows auf App- oder Portal-Seiten
  • Historische Rueckblicke auf Klimaschutz-Maßnahmen

Inhalts-Empfehlungen

  • Time-Feld: Schritt-Nummer, Monat/Jahr oder Quartal
  • Titel: 1–5 Wörter, Verb im Infinitiv oder Nomen
  • Beschreibung: 1–2 Sätze, konkrete Handlung oder Ergebnis beschreiben
  • Maximal 3 active-Einträge gleichzeitig (verwirrend)

Mobile & A11y

  • Timeline nutzt @container-Queries: kompakterer Abstand auf engen Containern
  • Als <ol> umgesetzt — Screen-Reader kündigen Position und Gesamtzahl an
  • Jeder Knotenpunkt hat ein sprachliches Status-Label
  • Verbindungslinie ist aria-hidden und rein visuell

Pitfalls

  • Nicht mehr als 12 Einträge — lieber in Phasen aufteilen
  • Letztes Item immer mit last-Prop versehen (entfernt Verbindungslinie)
  • Nicht für einfache Listen ohne Prozess-Charakter verwenden — dafür lieber Accordion
  • Keine Bilder im Slot ohne Bildbeschreibung

Installation

cp-components add timeline