Foundation
Typography
.type-kpi1.234,56 €.type-statMieteinnahmen.type-titleKartenüberschrift.type-body-strongFettgedruckter Text.type-bodyNormaler Absatztext für Beschreibungen und Inhalte..type-labelBeschriftung.type-metaÜberschriften
h1Dashboard-Übersicht
h2Monatliche Einnahmen
h3Objektdetails
h4Nebenkostenabrechnung
Colors
Accent (Teal)
--accent--accent-hover--accent-weakText
--text--muted--muted-2Surfaces
--bg--surface--surface-2--borderStatus
--success--success-weak--warning--warning-weak--danger--danger-weakBorder & Shadow
Schatten
shadow-smshadow-mdshadow-lgBorder-Radius
--r-card (16px)--r-control (10px)--r-pill (999px)Iconography
icon-sm (16 px)
icon-md (18 px)
icon-lg (20 px)
Overview
Alle Formularelemente nutzen die globalen Design-Tokens und sind für Light & Dark Mode optimiert.
Form Control
Select
Checks & Radios
Checkboxen
Radio-Buttons
Range
Input Group
Floating Labels
Layout (2-Spalten-Grid)
Validation
Accordion
Alerts
Erfolgreich gespeichert
Alle Änderungen wurden erfolgreich übernommen.
Hinweis
Die Mietkaution für Objekt 3 steht noch aus.
Fehler
Die Datei konnte nicht hochgeladen werden. Bitte versuchen Sie es erneut.
Information
Ein neues Update ist verfügbar. Aktualisieren Sie auf Version 3.0.
Badge
Breadcrumb
Buttons
Button Group
Card
Dies ist eine verschachtelte Karte mit Header und Body-Bereich zur Demonstration des Card-Layouts.
Carousel
Close Button
Collapse
Dropdowns
List Group
Modal
Navbar
Navs & Tabs
Offcanvas
Pagination
Placeholders
Popovers
Progress
Scrollspy
Scrollspy: Navigation passt sich der Scroll-Position an. Das aktive Element wird hervorgehoben, wenn der entsprechende Abschnitt sichtbar ist.
Spinners
Toasts
Tooltips
Weitere Komponenten, die wir speziell für vermieterwelt.de entwickelt haben.
PageHeader
Seitenüberschrift mit optionalen Action-Buttons.
Beispiel-Seitentitel
SearchDialog
Globale Suche, erreichbar über ⌘K. Overlay mit Suchergebnissen.
FilterBar + Search + ViewToggle
Standardisierte Control-Zeile für Seitenlisten: Tabs, Suche und Ansichtswechsel als ein Pattern.
Badges (Variants)
Semantische Status-Badges ohne Border-Jump, einheitliche Größen und Abstände.
Avatars (Sizes)
Avatar-System mit konsistenten Größenstufen und Tonalitäten.
MetricCard
Wiederverwendbare KPI-Karte für Dashboard-Widgets und Metriken.
ListBox (Icon + Density Patterns)
Einheitliche Listenboxen für Auswahlansichten, inkl. Active-State, Leading/Trailing Slots und Icon/Avatar-Kombinationen.
SettingsTabNav
Tab-Navigation für den Profil-/Einstellungsbereich.
Modal
Wiederverwendbares Modal (sm/md/lg), schließbar via Escape oder Backdrop-Klick.
Toast
Toast-Benachrichtigung mit Auto-Dismiss (3s). Varianten: success, info, error.
Sparkline
Inline-Sparkline-Chart für KPI-Cards.
StarRating
Sternebewertung mit Dezimalstellen-Unterstützung.
AnimatedNumber
Animierte Zahlenanzeige mit Count-Up-Effekt.
AnimatedProgressBar
Animierter Fortschrittsbalken mit Prozentanzeige.
V4ComingSoon
Platzhalter-Box für kommende v4.0 AI-Features.
- Feature-Vorschlag A
- Feature-Vorschlag B
- Feature-Vorschlag C
DevTodos
Entwickler-Todo-Liste für Clickdummy-Tracking.
- Beispiel Todo 1
- Beispiel Todo 2
KI-gestützte Features werden nach Abschluss von v3.0 ergänzt.
PlaceholderPage
Platzhalter für noch nicht implementierte v3.0-Seiten. Enthält Beschreibung, Partner-Info, Pillar-URL und Todo-Liste.