Leadity Designsystem

Komponentenbibliothek

Diese Übersicht stellt die visuelle Grundlage, wiederverwendbare UI-Bausteine und zusammengesetzte Seitenstrukturen des Leadity Designsystems vor. Wählen Sie einen Bereich, um Regeln, Varianten und interaktive Beispiele zu öffnen.

Grundlagen

Farben, Typografie und Icons bilden die gemeinsame visuelle Sprache für alle Leadity-Oberflächen.

Komponenten

Interaktive Bausteine, Informationsflächen und Zustände für konsistente Arbeitsabläufe im Produkt.

Buttons & Quicklinks

Aktionen, Navigation, Iconbuttons und Quicklink-Chips in allen belegten Größen und Zuständen. Komponentenreferenz öffnen

Elementsteuerung

Sortiergriffe und Dot Menus für Cards, Tabellenzeilen und dichte Aufgabenflächen. Komponentenreferenz öffnen

Inhaltsstruktur & Prozessführung

Tabs, Accordions, Stepper und zugängliche Splitter für parallele Ansichten, sekundäre Inhalte, lineare Abläufe und anpassbare Arbeitsflächen. Komponentenreferenz öffnen

Cards & Header Cards

Base-Card-Größen sowie Header Cards für Übersichten, Aufgabenbereiche und Unterseiten. Komponentenreferenz öffnen

Chips, Avatare & Status

Metadaten, Verantwortlichkeiten, Bearbeitungszustände und Fortschrittsanzeigen. Komponentenreferenz öffnen

Filter & Form-Controls

Registrierte Felder und Auswahlcontrols; Filter Cards und Popover werden ausschließlich daraus komponiert. Komponentenreferenz öffnen

Dialoge & Feedback

Confirmdialogs, Modals, Popover, Tooltips, Meldungen und Ladezustände. Komponentenreferenz öffnen

Data

Tabellen, Baumstrukturen, Auswahl, Sortierung und kompakte Datenwerte. Komponentenreferenz öffnen

Task-Flächen

Aufgabenlisten, Task Cards und kontextuelle Sammelaktionen für operative Arbeitsbereiche. Komponentenreferenz öffnen

Seitenstrukturen

App-Schale, Kompositionen und Seitentemplates zeigen, wie die Komponenten zu vollständigen Produktflächen zusammenspielen.

App-Shell

Globaler Header, Navigation, Kontextmenü, Content-Bereich und Footer als gemeinsame Produktschale. Strukturreferenz öffnen

Template-Kompositionen

Zusammenspiel von Inhaltswegen, Filtern, Status, Datenflächen, Tabs und Kapitelsteuerung. Kompositionsreferenz öffnen

Modulübersicht

Einstieg und Orientierung in ein Modul mit Header Card und zweispaltigem Inhaltsbereich. Template öffnen

Bearbeitungsübersicht

Operativer Einstieg mit Aufgabenstatus, Filter Card und modulabhängigem Content Slot. Template öffnen

Modul-Unterseite

Tiefe Arbeitsebene mit Subpage Header, lokaler Navigation und Content Card. Template öffnen