Dashboard-Vorlage
Dies ist eine Vorlage für ein Dashboard
Diese Vorlage enthält wiederverwendbare Komponenten, die Sie für Ihr eigenes Dashboard einsetzen können. Nachfolgend finden Sie Beispiele für die wichtigsten Bausteine.
KPICard
Die KPICard-Komponente zeigt eine Kennzahl mit Titel und optionaler Beschreibung an. Mit dem Parameter href oder to wird die Karte klickbar und erhält beim Hover einen violetten Schatten. Optional zeigt sparkline einen Flächen-Trend unter der Kennzahl.
Die ultimative Antwort auf die endgültige Frage nach dem Leben, dem Universum und dem ganzen Rest
42
Die einzige Zahl, die sowohl gerade als auch prim ist
2
Vermutlich weil wir 10 Finger haben
10
Empfohlene Anzahl Kaffeepausen für maximale Produktivität
3–5
Anteil der Bevölkerung, die montags gerne aufsteht
3%
Eine bedeutungslose Zahl, die 2025 die Welt eroberte
67
Box – Info
Die Standard-Variante der Box zeigt allgemeine Hinweise auf hellem Hintergrund an. Inhalte können über den Slot oder die html-Eigenschaft übergeben werden.
Dieses Dashboard untersucht faszinierende Zahlen und ihre Bedeutung – von der Antwort auf die endgültige Frage bis hin zu den Bausteinen der Mathematik.
Die Antwort auf allesWarum die Zahl 42 laut Douglas Adams die ultimative Antwort auf die Frage nach dem Leben, dem Universum und dem ganzen Rest ist.
PrimzahlenDie Bausteine der Mathematik – warum die 2 als einzige gerade Primzahl eine Sonderstellung einnimmt.
Box – Warnung
Die Variante warning hebt Warnungen mit rotem Hintergrund hervor. Über title-addon kann ein Zusatz zum Titel angegeben werden.
Die Europäische Behörde für Lebensmittelsicherheit (EFSA) empfiehlt maximal 400 mg Koffein pro Tag – etwa 4 bis 5 Tassen Kaffee. Darüber hinaus nehmen Nervosität und Schlafstörungen zu.
Kaffeepausen und ProduktivitätWarum 3 bis 5 Tassen pro Tag nicht nur gut schmecken, sondern auch die Produktivität steigern.
EFSA Scientific Opinion on caffeine (PDF)Die vollständige Risikobewertung zu Koffein der Europäischen Behörde für Lebensmittelsicherheit.
Box – Highlight
Die Variante highlight verwendet einen grünen Hintergrund mit weisser Schrift und eignet sich für besonders wichtige Informationen.
Dictionary.com ernannte «67» zum Wort des Jahres 2025 – eine bedeutungslose Zahlenkombination aus einem TikTok-Song, die die Welt eroberte, bevor sich jemand auf eine Bedeutung einigen konnte.
Das 6-7 MemeWie eine bedeutungslose Zahlenkombination zum weltweiten Phänomen wurde.
Montags-MotivationWarum nur 3 % der Bevölkerung montags gerne aufsteht – und was die Forschung dazu sagt.
Dropdown
Die Dropdown-Komponente folgt dem Markup des Designsystem-Dropdowns: Caret mit Innenabstand, 180°-Drehung im offenen Zustand, Close-Icon zum Zurücksetzen.
Table
Die Table-Komponente rendert eine konfigurierbare Tabelle. Definieren Sie die Spalten über columns und die Daten über rows.
| Variante | Beschreibung | Verwendung |
|---|---|---|
| info (Standard) | Heller Hintergrund für allgemeine Hinweise. | variant="info" |
| warning | Roter Hintergrund für Warnungen. | variant="warning" |
| highlight | Grüner Hintergrund mit weisser Schrift. | variant="highlight" |
Weiterführende Informationen
Hier finden Sie weitere nützliche Ressourcen und Hintergrundinformationen.