Components

Steps, Cards, Buttons — und der Beweis, dass klassisches Bootstrap darunter weiterlebt.

Steps — Pipeline

Ticket-Lebenszyklus, aktueller Schritt pulsiert:

  1. Eingegangen
  2. Zugewiesen
  3. In Arbeit
  4. Test
  5. Gelöst
  1. Angebot
  2. Bestellung
  3. Lieferverzug
  4. Montage
  5. Abnahme
  1. Entwurf
  2. Review
  3. Freigabe
<ol steps>
  <li dot="success">Eingegangen</li>
  <li dot="primary" pulse>In Arbeit</li>
  <li dot>Gelöst</li>
</ol>

Cards & KPIs

Standard-Card Zusatz

Header in Kapitälchen-Anmutung, Inhalt frei, Footer klebt unten — auch wenn die Nachbar-Card höher ist.

Aktualisiert vor 5 min
Offene Alarme Zabbix
3 2 mehr als gestern
Klickbare Card

Ganze Card als Link — <a card href>, Hover färbt den Rahmen in der Primärfarbe.

→ Details

Buttons

Nackte <button> werden automatisch gestylt, Varianten per Attribut:

<button>Speichern</button>
<button ghost>Abbrechen</button>
<button danger>Löschen</button>
<button plain>Nur Text</button>

Bootstrap-Interop

Die semantische Schicht ersetzt Bootstrap nicht — sie liegt darüber. Klassische Klassen funktionieren unverändert:

Badge aktiv überfällig

72 %