Komponente · 6 Varianten
Timeline-Item
components/TimelineItem.astro
Ein Eintrag der Zeitachse: Datum links oder oben, Punkt mit Linie, Datum als Proof, wechselseitig, kompakt.
Notizen
- Bestand: Timeline-Sektion mit Rückgrat und Register, kein Einzel-Item.
- Datum ist Label oder Proof, nie Display.
Props
| Name | Typ | Default | Notiz |
|---|---|---|---|
| variant | "datum-links" | "datum-oben" | "punkt" | "proof" | "wechsel" | "kompakt" | "datum-links" | 01–06. |
| surface | "nacht" | "paper" | "nacht" | Pflicht-Paar. |
<TimelineItem variant="datum-links" surface="nacht" />01 · Datum links
3 + 9
Timeline rueckgrat. Haarlinie oben.
Nacht
-
Tag 0
Launch
Fläche live, Index angemeldet.
-
Woche 3
Erste Query
Snippet steht, Klicks laufen.
-
Monat 6
Zweiter Slot
Erweiterung ohne Relaunch.
Paper
-
Tag 0
Launch
Fläche live, Index angemeldet.
-
Woche 3
Erste Query
Snippet steht, Klicks laufen.
-
Monat 6
Zweiter Slot
Erweiterung ohne Relaunch.
02 · Datum oben
Gestapelt
Timeline register. Für schmale Spalten.
Nacht
-
Tag 0
Launch
Fläche live, Index angemeldet.
-
Woche 3
Erste Query
Snippet steht, Klicks laufen.
-
Monat 6
Zweiter Slot
Erweiterung ohne Relaunch.
Paper
-
Tag 0
Launch
Fläche live, Index angemeldet.
-
Woche 3
Erste Query
Snippet steht, Klicks laufen.
-
Monat 6
Zweiter Slot
Erweiterung ohne Relaunch.
03 · Punkt
Punkt und Linie
Step-Item punkt. 8 px, w-px.
Nacht
-
Tag 0
Launch
Fläche live, Index angemeldet.
-
Woche 3
Erste Query
Snippet steht, Klicks laufen.
-
Monat 6
Zweiter Slot
Erweiterung ohne Relaunch.
Paper
-
Tag 0
Launch
Fläche live, Index angemeldet.
-
Woche 3
Erste Query
Snippet steht, Klicks laufen.
-
Monat 6
Zweiter Slot
Erweiterung ohne Relaunch.
04 · Proof
Datum in Oliv-Mono
Proof. Drei Spalten.
Nacht
-
Tag 0
Launch
Fläche live, Index angemeldet.
-
Woche 3
Erste Query
Snippet steht, Klicks laufen.
-
Monat 6
Zweiter Slot
Erweiterung ohne Relaunch.
Paper
-
Tag 0
Launch
Fläche live, Index angemeldet.
-
Woche 3
Erste Query
Snippet steht, Klicks laufen.
-
Monat 6
Zweiter Slot
Erweiterung ohne Relaunch.
05 · Wechsel
Links, rechts, Linie mittig
Shadcnblocks timeline, Anordnung. grid-cols-2.
Nacht
-
Tag 0
Launch
Fläche live, Index angemeldet.
-
Woche 3
Erste Query
Snippet steht, Klicks laufen.
-
Monat 6
Zweiter Slot
Erweiterung ohne Relaunch.
Paper
-
Tag 0
Launch
Fläche live, Index angemeldet.
-
Woche 3
Erste Query
Snippet steht, Klicks laufen.
-
Monat 6
Zweiter Slot
Erweiterung ohne Relaunch.
06 · Kompakt
Datum, Titel in einer Zeile
Changelog. Haarlinie unten.
Nacht
- Tag 0Launch
- Woche 3Erste Query
- Monat 6Zweiter Slot
Paper
- Tag 0Launch
- Woche 3Erste Query
- Monat 6Zweiter Slot