11. Timelines

Für Statusseiten, Releases und Chronologien. xpulse-timeline ist eine echte Theme-Komponente — keine app-spezifischen Custom-Styles.

Live-Demo

v1.3.0 live

Produktiv ausgerollt und erreichbar.

v1.4.0 testing

Intern in Review, Features stabil aber noch nicht final freigegeben.

Incident

Ein Fehlerfall oder geplanter Hotfix kann so prominent dargestellt werden.

v1.2.0 archiviert

Ältere Version ohne besonderen Status.

Struktur

1 <div class="xpulse-timeline">
2   <div class="xpulse-timeline__item">
3     <div class="xpulse-timeline__line">
4       <div class="xpulse-timeline__dot xpulse-timeline__dot--info"></div>
5     </div>
6     <article class="xpulse-timeline__card xpulse-card--info">
7       <strong class="xpulse-text--info">v1.3.0 live</strong>
8       <p>Beschreibung</p>
9     </article>
10   </div>
11 </div>

Dot-Varianten

Klasse	Bedeutung
`xpulse-timeline__dot`	Neutral (kein Kontext)
`xpulse-timeline__dot--info`	Positiv / Online / Live
`xpulse-timeline__dot--warning`	Pending / In Review
`xpulse-timeline__dot--danger`	Fehler / Incident

Empfehlung: Dot-Farbe und Card-Variante (xpulse-card--info etc.) immer zusammen setzen, damit Farbe und Rahmen übereinstimmen.

1	<div class="xpulse-timeline">
2	<div class="xpulse-timeline__item">
3	<div class="xpulse-timeline__line">
4	<div class="xpulse-timeline__dot xpulse-timeline__dot--info"></div>
5	</div>
6	<article class="xpulse-timeline__card xpulse-card--info">
7	<strong class="xpulse-text--info">v1.3.0 live</strong>
8	<p>Beschreibung</p>
9	</article>
10	</div>
11	</div>