Reihe

layout.cluster · v1.0.0 Horizontale Reihe mit Umbruch (Buttons, Badges, Meta-Zeilen) — wrappt fluid ohne Media Query WebsiteAppDesktopE-Mail

Spalten

layout.columns · v1.0.0 Zwei benannte Spalten mit Verhältnis (1:1, 2:1, 1:2) — stapeln mobil untereinander WebsiteAppDesktop

Effekt-Rahmen

layout.effect-frame · v1.0.0 Hülle mit dekorativem Hintergrund oder Rand für beliebige Inhalte: laufender Rand-Glanz, Punkt-/Linien-Raster oder Verlaufs-Schein — alle Effekte aus Tokens und mit prefers-reduced-motion-Rückfall WebsiteAppDesktop

Raster

layout.grid · v1.1.0 Zwölf-Spalten-Raster. Kinder bestimmen ihre Breite über node.layout.span; ohne Angabe gilt die Vorgabe aus dem columns-Prop. WebsiteAppDesktop

Stapel

layout.stack · v1.1.0 Vertikaler Stapel mit Token-Abstand — das Grundlayout für untereinander stehende Inhalte WebsiteAppDesktopE-Mail

Button

ui.button · v1.0.0 Auslöser für Aktionen — emittiert das semantische Event activate WebsiteAppDesktop

Checkbox

ui.checkbox · v1.0.0 Checkbox mit Label, Zuständen (disabled, invalid) und Formular-Tokens WebsiteAppDesktop

Eingabefeld

ui.input · v1.0.0 Einzeiliges Formularfeld mit Label, Zuständen (disabled, invalid) und Formular-Tokens WebsiteAppDesktop

Radio-Gruppe

ui.radio-group · v1.0.0 Radiobutton-Gruppe mit Optionen-Array — Gruppen-Logik im Element gelöst (ein name, eine Auswahl) WebsiteAppDesktop

Auswahlfeld

ui.select · v1.0.0 Auswahlfeld (native select) mit Optionen-Array, Zuständen und Formular-Tokens WebsiteAppDesktop

Schalter

ui.switch · v1.0.0 An/Aus-Schalter (Toggle) — checkbox-Semantik mit Switch-Optik über Tokens WebsiteAppDesktop

Mehrzeiliges Textfeld

ui.textarea · v1.0.0 Mehrzeiliges Formularfeld mit Label, Zuständen und Formular-Tokens WebsiteAppDesktop

Button-Gruppe

ui.button-group · v1.0.0 Segmentierte Button-Gruppe (Untitled-UI-Muster): verbundene Secondary-Buttons mit geteilten Rändern, aktives Segment hervorgehoben WebsiteAppDesktop

Icon-Knopf

ui.icon-button · v1.0.0 Reiner Icon-Button (Utility-Button): Varianten secondary/ghost/gefahr, Pflicht-aria-label, emittet activate WebsiteAppDesktop

Schieberegler (Slider)

ui.slider · v1.0.0 Nativer Range-Slider mit Token-Styling und Live-Wertanzeige — funktioniert ohne JS, Controller aktualisiert Anzeige und emittet change WebsiteAppDesktop

Avatar

ui.avatar · v1.0.0 Bild oder Initialen einer Person mit optionalem Status WebsiteAppDesktopE-Mail

Überschrift

ui.heading · v1.0.0 Überschrift der Ebenen 1–4 WebsiteAppDesktopE-Mail

Icon

ui.icon · v1.0.0 Kuratiertes Inline-SVG-Icon-Set (Whitelist) — Größen über icon-Tokens, Farbe über currentColor/Ton WebsiteAppDesktopE-Mail

Bild

ui.image · v1.0.0 Bild mit URL-Whitelist, Seitenverhältnis und Platzhalter-Fallback bei unsicherer Quelle WebsiteAppDesktopE-Mail

Listen-Zeile (Item)

ui.item · v1.0.0 Universelle Listen-Zeile: Icon/Avatar-Fläche, Titel + Untertitel, Meta rechts, optionaler Chevron — Grundbaustein für Listen, Suchergebnisse, Auswahllisten WebsiteAppDesktop

Link

ui.link · v1.0.0 Textlink mit URL-Whitelist — echte href-Navigation bleibt immer die Rückfallebene WebsiteAppDesktopE-Mail

Rich Text

ui.richtext · v1.0.0 Formatierter Text aus dem Editor — wird serverseitig gegen die Whitelist sanitisiert WebsiteAppDesktopE-Mail

Text

ui.text · v1.0.0 Fließtext-Absatz mit Ton und Größe WebsiteAppDesktopE-Mail

Trennlinie

ui.divider · v1.0.0 Horizontale Trennlinie, optional mit zentriertem Beschriftungstext WebsiteAppDesktopE-Mail

Ankündigungs-Pille

ui.announcement · v1.0.0 Pill-Banner über einer Überschrift (Beispiel: Neu · Version 2 ist da): Markierung links, Text, optionaler Pfeil — als Link oder statisch WebsiteAppE-Mail

Preis

ui.price · v1.0.0 Shop-Preiszeile: Betrag (bei Streichpreis automatisch in Sale-Farbe), Streichpreis, Rabatt-Badge — Sale-Ton über den themebaren color.sale-Token WebsiteApp

Mengen-Stepper

ui.quantity-stepper · v1.0.0 Mengenwahl mit −/+ und Zahleneingabe — progressive (Input funktioniert ohne JS), Controller klemmt auf min/max und emittet change WebsiteApp

Sterne-Bewertung

ui.rating · v1.1.0 Rating-Anzeige 0–5 mit Teilsternen (Breiten-Maske, kein JS) und optionaler Anzahl — Farben über status.warning-/Sale-Tokens WebsiteApp

Varianten-Swatch

ui.swatch · v1.0.0 Farb-/Bild-Kachel für Produktvarianten. Die Produktfarbe ist ein CONTENT-Datum (Prop), kein Design-Token — Auswahl-Ring und Maße kommen aus Tokens WebsiteApp

Badge

ui.badge · v2.1.0 Status- oder Kategorie-Kennzeichen. BREAKING 2.0.0: Prop tone heißt jetzt variant (Migration 1-to-2 vorhanden) WebsiteAppDesktopE-Mail

Chip

ui.chip · v1.1.0 Filter-/Auswahl-Chip — im Element Builder generiert (Archetyp box) WebsiteAppDesktop

Icon-Fläche (Featured Icon)

ui.featured-icon · v1.0.0 Icon auf getönter runder/eckiger Fläche (Untitled-UI-Muster Featured Icon) — Töne aus Status-/Primary-Tokens per color-mix abgeleitet WebsiteAppDesktop

Fortschrittsbalken

ui.progress · v1.0.0 Fortschrittsbalken (determiniert oder unbestimmt) mit Tönen und optionaler Wertanzeige WebsiteAppDesktop

Skeleton

ui.skeleton · v1.1.0 Lade-Platzhalter (schimmernde Fläche) für Text, Blöcke und Kreise WebsiteAppDesktop

Ladeindikator

ui.spinner · v1.0.0 Rotierender Ladeindikator mit Größen und Screenreader-Label WebsiteAppDesktop

Status-Anzeige

ui.status · v1.0.0 Zustands-Punkt mit Beschriftung (online, beeinträchtigt, offline, wartend) — Punkt pulsiert optional; Farben aus Status-Tokens WebsiteAppDesktopE-Mail

Hinweis

component.alert · v1.0.0 Hinweis-Box in vier Tönen mit Icon, optional schließbar WebsiteAppDesktopE-Mail

Brotkrumen

component.breadcrumb · v1.0.0 Pfadnavigation (items-Array, letzter Eintrag = aktuelle Seite ohne Link) WebsiteAppDesktop

Dropdown-Menü

component.dropdown · v1.0.0 Auslöser-Button mit Aktionsmenü — Outside-Click und Escape schließen, select als semantisches Event WebsiteAppDesktop

Seitennavigation

component.pagination · v1.0.0 Blättern durch Seiten (Fenster mit Auslassungen) — navigate mit Seitenzahl als Payload WebsiteAppDesktop

Tabelle

component.table · v1.1.0 Datentabelle aus columns/rows-Props — gestreift, dicht, mobil horizontal scrollbar WebsiteAppDesktopE-Mail

Tabs

component.tabs · v1.0.0 Reiter mit Panels (bis 4) — lokaler Zustand im Controller, semantisches Event change WebsiteAppDesktop

Diagramm

component.chart · v1.0.0 Diagramm auf ApexCharts (lokal ausgeliefert, kein CDN): Linie, Balken, Fläche, Kreis, Ring, Radar. Farben und Schrift werden zur Laufzeit aus den Design-Tokens gelesen, ein Theme-Wechsel färbt mit. Ohne JavaScript bleibt eine lesbare Wertetabelle stehen WebsiteAppDesktop

Vorher/Nachher-Vergleich

component.comparison · v1.0.0 Zwei Fassungen übereinander mit Schieberegler: Vorher links, Nachher rechts, Griff per Maus/Tastatur — für Bild- oder Text-Vergleiche WebsiteAppDesktop

Verlaufslinie (Sparkline)

component.sparkline · v1.0.0 Kleine Verlaufsgrafik ohne Achsen für Kennzahl-Karten und Tabellenzellen — reines Inline-SVG, KEINE Diagramm-Bibliothek nötig; Farbe aus Tokens, Wertetabelle als Rückfall entfällt (Werte stehen im aria-label) WebsiteAppDesktop

Auswahl-Karten (Choicebox)

component.choice-box · v1.0.0 Radio- oder Mehrfachauswahl als Karten mit Titel, Beschreibung, optionalem Icon und Badge — Tastatur-fähig, emittiert selection WebsiteAppDesktop

Combobox (Select mit Suche)

component.combobox · v1.0.0 Einzelauswahl mit Suchfilter und Options-Panel: Tastatur-Navigation (Pfeile/Enter), Escape/Außenklick schließen, optionale Beschreibungen pro Option WebsiteAppDesktop

Datumswahl (Date Picker)

component.date-picker · v1.0.0 Datums-Eingabe mit Popover-Kalender (Monatsraster, Vor/Zurück, Heute markiert, Mo-So) — progressive: Textfeld TT.MM.JJJJ funktioniert ohne JS, emittet change WebsiteAppDesktop

Datei-Upload (Dropzone)

component.file-upload · v1.0.0 Upload-Zone (Untitled-UI-Muster): Klick oder Drag-and-Drop, Dateiliste mit Größe und Entfernen — Prototyp ohne Server-Upload, emittet dateien WebsiteAppDesktop

Filterleiste

component.filter-bar · v1.0.0 Filter-Bar über Tabellen/Listen: Suchfeld + Filter-Buttons mit Options-Panels + Zurücksetzen — Controller pflegt aktive Filter, emittet filter WebsiteAppDesktop

Mehrfach-Select

component.multi-select · v1.0.0 Multi-Select mit Chips im Feld, Suchfilter und Options-Panel (Untitled-UI-Muster) — Controller pflegt Auswahl, Escape/Außenklick schließen, emittet auswahl WebsiteAppDesktop

Tag-Eingabe

component.tag-input · v1.0.0 Freie Schlagwort-Eingabe: Enter/Komma legt einen Chip an, Backspace im leeren Feld entfernt den letzten, optionale Vorschlagsliste — emittiert tags WebsiteAppDesktop

Code-Block

component.code-block · v1.0.0 Quelltext-Anzeige mit Kopfzeile (Dateiname/Sprache), optionalen Zeilennummern und Kopieren-Knopf — Syntax-Töne über Tokens, kein Highlighter zur Laufzeit WebsiteAppDesktop

Befehls-Schnipsel

component.snippet · v1.0.0 Einzeiliger Befehl mit Prompt-Zeichen und Kopieren-Knopf, optional mit Reitern (npm/pnpm/yarn) — Docs- und Onboarding-Baustein WebsiteAppDesktop

Terminal (Ausgabe)

component.terminal · v1.0.0 Terminal-Fenster mit Fenster-Punkten und Zeilen-Typen (Befehl, Ausgabe, Erfolg, Fehler, Hinweis); Zeilen erscheinen nacheinander (abschaltbar, respektiert prefers-reduced-motion) WebsiteAppDesktop

Video-Spieler

component.video-player · v1.0.0 Video mit eigener Bedienleiste aus Tokens: Abspielen/Pause, Fortschritt mit Klick-Sprung, Zeitangabe, Ton, Vollbild — nutzt das native video-Element, kein Fremd-Player WebsiteAppDesktop

Einlaufende Liste

component.animated-list · v1.0.0 Liste, deren Einträge nacheinander einlaufen (Benachrichtigungs-Demos, Feature-Aufzählungen): Icon-Fläche, Titel, Text, Zeit — mit prefers-reduced-motion-Rückfall WebsiteAppDesktop

Kontextmenü

component.context-menu · v1.0.0 Rechtsklick-Menü für eine Zielfläche: Einträge mit Icons/Trennern/Gefahr-Ton, öffnet an der Mausposition, schließt bei Außenklick/Escape — Einträge emittieren aktion WebsiteAppDesktop

Schritte (Progress Steps)

component.progress-steps · v1.0.0 Wizard-Fortschritt (Untitled-UI-Muster): erledigte Schritte mit Häkchen, aktiver hervorgehoben, kommende gedämpft — Verbindungslinien aus Tokens WebsiteAppDesktop

Tab-Leiste (Pills)

component.tab-bar · v1.0.0 Segmentierte Pill-Tab-Leiste (Atlassian-Collections-Muster): Leiste auf sunken-Fläche, aktiver Tab als Secondary-Pill — progressive Links, optional zentriert Website

Theme-Umschalter

component.theme-switcher · v1.0.0 Segmentierter Umschalter Hell/Dunkel/System — setzt data-theme am Dokument, merkt sich die Wahl (localStorage) und folgt der Systemeinstellung WebsiteAppDesktop

Baum (Tree View)

component.tree · v1.0.0 Hierarchische Baum-Ansicht (Ordner/Strukturen, max. 6 Ebenen): Zweige klappen per Controller, Blätter emittieren select — Chevron dreht, aktiver Knoten hervorgehoben WebsiteAppDesktop

Modal

component.modal · v1.1.0 Dialog mit Backdrop (surface.backdrop + layer.modal) — Schließen über X, Backdrop-Klick und Escape; inline-Modus für Demo/Builder WebsiteAppDesktop

Tooltip

component.tooltip · v1.0.0 Hinweis-Blase bei Hover/Fokus — rein CSS (kein JS), Ebene über layer.dropdown WebsiteAppDesktop

Dialog-Stapel

component.dialog-stack · v1.0.0 Mehrstufiger Dialog (Wizard): gestapelte Ebenen mit Zurück/Weiter, hintere Ebenen bleiben versetzt sichtbar — Escape schließt, emittiert step und finish WebsiteAppDesktop

Schublade (Drawer)

component.drawer · v1.0.0 Von rechts einfahrendes Slideout-Panel mit Backdrop (Untitled-UI-Muster): Öffner-Button, Kopf mit Titel + Schließen, Inhalt, Fußleiste — Escape/Backdrop schließen WebsiteAppDesktop

Hover-Karte (Vorschau)

component.hover-card · v1.0.0 Vorschau-Karte beim Überfahren/Fokussieren eines Auslösers (Link-Vorschau, Personen-Karte): Titel, Text, Meta-Zeile — mit Verzögerung, schließt bei Verlassen/Escape WebsiteAppDesktop

Produkt-Karte

component.product-card · v1.0.0 Der Grundstein aller Shop-Grids: Bild (oder Platzhalter), Sale-Badge, Wunsch-Herz, Titel, ui.price + ui.rating — komponiert aus den Shop-Elementen WebsiteApp

Produkt-Galerie

component.product-gallery · v1.0.0 Thumbnail-Spalte + Hauptbild — Controller wechselt das Hauptbild beim Thumbnail-Klick; ohne Bilder rendern Platzhalter-Flächen WebsiteApp

Sticky-Kaufleiste

component.sticky-buy-bar · v1.0.0 Am unteren Rand fixierte Kaufleiste: Titel + ui.price + Warenkorb-CTA — erscheint erst nach dem ersten Scroll-Viewport (Controller) WebsiteApp

Varianten-Picker

component.variant-picker · v1.0.0 Produktvarianten wählen: Farb-Swatches (ui.swatch) + Größen-Pills mit Verfügbarkeit — Controller pflegt die Auswahl und emittet variante WebsiteApp

Leerzustand (Empty State)

component.empty-state · v1.0.0 Zentrierter Leerzustand (Untitled-UI-Muster): Icon-Fläche, Titel, Text, Primär- und Sekundär-Aktion — für leere Listen, Suchergebnisse, Erststarts WebsiteAppDesktop

Akkordeon

component.accordion · v1.0.0 Auf-/zuklappbare Einträge (items-Array) — Grundlage für FAQ; toggle als semantisches Event WebsiteAppDesktop

Card

component.card · v1.0.0 Inhaltskarte mit Media-, Inhalts- und Footer-Slot WebsiteAppDesktopE-Mail

CTA-Button

component.cta-button · v1.0.0 Grosser Call-to-Action — komponiert im Component Builder auf ui.button Website

Navigation

component.navigation · v1.5.0 Hauptnavigation in zwei Menü-Formen: klassische Leiste ODER Burger-Flyout (Logo + Primary-CTA + Burger, Links im Vollflächen-Overlay rechtsbündig) — navigate als semantisches Event WebsiteAppDesktop

tricoma Button

component.tricoma-button · v1.0.0 tricoma-Marken-Button — Komposition über ui.button WebsiteDesktop

Raster: Haupt + Seitenspalte

section.grid-two-column · v1.0.0 Standard-Aufteilung 8/4 ab md, darunter gestapelt. Zeigt zugleich, wie die Spannweite am Kind gesetzt wird. Website

Karten-Reihe (Scroll)

section.card-row · v1.0.0 Horizontale Content-Karten-Reihe mit CSS-Scroll-Snap (kein JS): farbige Karten (Ton per Prop aus Tokens) mit Badge, Titel, Link und optionaler Media-Fläche Website

Call-to-Action

section.cta · v1.0.0 Aufruf-Banner mit Titel, Text und Button-Slot — brand- oder neutral-getönt, mobil kompakt Website

FAQ (Accordion)

section.faq · v1.1.0 Fragen-Accordion auf nativen details/summary-Elementen (kein JS): Sektions-Kopf + Haarlinien-Trenner, Chevron dreht im offenen Zustand Website

Feature-Bento

section.feature-bento · v1.0.0 Karten-Grid mit Haarlinien-Bordern (Bento-Muster): Sektions-Kopf (Mono-Kicker + Display-Titel), Karten mit Mono-Label, Text, optionaler Media-Fläche und Breit-Option Website

Feature-Raster

section.features · v1.0.0 Feature-Kacheln mit Icon, Titel und Text — auto-fit-Raster, mobil eine Spalte Website

Footer (Gesprächs-CTA)

section.footer-cta · v1.0.0 Großer Website-Footer als Band: große Nav-Links + Gesprächs-CTA, Trennlinie, Rechtliches/Firma/Social, Copyright — ton-neutral, Instanz wählt den Ton, Theme liefert die Werte Website

Hero

section.hero · v1.0.0 Große Einstiegs-Section mit Titel, Untertitel und Aktions-Slot Website

Hero (zentriert)

section.hero-centered · v1.1.0 Zentrierter Hero: zweizeiliger Display-Titel, horizontale Häkchen-Zeile, Primary- + Ghost-CTA, Plattform-Leiste in Mono — ton-neutral, Theme liefert Farben und Schrift-Familien Website

Hero (geteilt)

section.hero-split · v1.0.0 Generischer Split-Hero als dunkles Band: zweifarbiger Titel, Häkchen-Liste, CTA, Foto — Farben vollständig über die color.band-Tokens (Theme steuert) Website

Logo-Leiste

section.logo-cloud · v1.0.0 Referenz-Logos in einer fluiden Reihe (gedämpft, Hover farbig) Website

Laufband (Marquee)

section.marquee · v1.0.0 Endlos laufendes Band für Logos oder Kurztexte: Richtung und Tempo wählbar, Randabblendung, Pause bei Mauskontakt — hält bei prefers-reduced-motion an Website

Media-Split

section.media-split · v1.0.0 Text-Bild-Wechselzeile: Display-Titel + Text + Text-Link-CTA neben einer Media-Fläche (Bild oder Platzhalter-Fläche), Seite wählbar Website

Preistabelle

section.pricing · v1.0.0 Preispläne als Karten (Highlight-Plan hervorgehoben) — auto-fit-Raster, mobil gestapelt Website

Zitat-Karten (Social Proof)

section.quote-card · v1.0.0 Karten mit Zitat, Person, Handle und Plattform-Hinweis — statische Social-Proof-Karten ohne externen Abruf (keine Fremd-API zur Laufzeit) WebsiteE-Mail

Kennzahlen-Kacheln

section.stat-tiles · v1.0.0 Stat-Kacheln mit Haarlinien-Border: Mono-Label mit Status-Punkt, große Display-Zahl, Mono-Fußnote — optional mit Sektions-Kopf (Mono-Kicker + Display-Titel) Website

Kennzahlen

section.stats · v1.0.0 Zahlen-Banner (Wert + Beschriftung) — auto-fit, mobil gestapelt Website

Teaser-Karte

section.teaser-card · v1.0.0 Im Block Builder eingefrorene Komposition WebsiteApp

Kundenstimmen

section.testimonials · v1.0.0 Zitate-Raster mit Avatar (Initialen), Name und Rolle — auto-fit, mobil gestapelt Website

Absatz mit Punkten

section.text-bullets · v1.0.0 Universeller Inhalts-Block: Kicker (Akzent), zweifarbiger Titel, Text, Häkchen-Liste (optional mit fettem Auftakt je Punkt), Zitat-Balken, optionales Foto — als dunkles oder helles Band (Wechsel-Rhythmus) Website

Produkt-Grid

section.product-grid · v1.0.0 Responsives Grid aus Produkt-Karten (auto-fill) mit optionalem Sektions-Kopf — für Empfehlungen, Kategorien, Suchergebnisse Website

Produkt-Bühne (PDP-Kopf)

section.product-stage · v1.0.0 Der Kopf der Produktdetailseite: Produkt-Galerie | Kaufbox (Titel, Sterne, Preis, Varianten-Picker, Mengen-Stepper, Warenkorb-CTA mit cart-Event, Trust-Punkte) Website

Bewertungen

section.reviews · v1.0.0 Review-Sektion: Zusammenfassung (große Zahl + Sterne + Verteilungs-Balken + Passform-Feedback) neben Review-Karten mit Autorin, Datum, Variante Website

Platzhalter-Fläche

section.placeholder · v1.0.0 Reservierte Sektion für noch fehlende Inhalte (Produktvisuals, Videos, Embeds): optionaler Kicker/Titel + gestrichelte Fläche mit Mono-Label und wählbarem Seitenverhältnis Website

Footer

section.footer · v1.1.0 Seitenfuß mit Marke, Link-Spalten und Copyright-Zeile — Spalten stapeln mobil Website

App Shell

template.app.shell · v1.2.0 App-Seitengerüst: Seitenleiste links (Navigation), Kopfzeile optional, Arbeitsbereich — für Desktop-Apps und Web-Applications WebsiteAppDesktop

Developer-Portal

template.dev.portal · v1.4.0 Portal-Seitengerüst MIT eigenem Grundlayout: Header in voller Breite mit Linie (sticky), Inhalts-Container, Footer-Band in voller Breite — das erste Template, das sein Layout selbst besitzt Website

Website Standard

template.website.standard · v1.0.0 Standard-Seitenaufbau: Navigation oben (Pflicht), beliebige Sections in der Mitte, Footer unten (Pflicht) Website