Horizontale Reihe mit Umbruch (Buttons, Badges, Meta-Zeilen) — wrappt fluid ohne Media Query

Zwei benannte Spalten mit Verhältnis (1:1, 2:1, 1:2) — stapeln mobil untereinander

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

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

Vertikaler Stapel mit Token-Abstand — das Grundlayout für untereinander stehende Inhalte

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

Natives Audio-Element mit Browser-Steuerung und optionaler Unterschrift — unsichere Quellen zeigen den Platzhalter

Bild oder Initialen einer Person mit optionalem Status

Überlappende Avatare mit „+n“-Rest — Teams, Zuweisungen, Teilnehmerlisten

Status- oder Kategorie-Kennzeichen. BREAKING 2.0.0: Prop tone heißt jetzt variant (Migration 1-to-2 vorhanden)

Auslöser für Aktionen — emittiert das semantische Event activate

Segmentierte Button-Gruppe (Untitled-UI-Muster): verbundene Secondary-Buttons mit geteilten Rändern, aktives Segment hervorgehoben

Checkbox mit Label, Zuständen (disabled, invalid) und Formular-Tokens

Filter-/Auswahl-Chip — im Element Builder generiert (Archetyp box)

Nativer Farbwähler (input type=color) als Formulardatum — z. B. eine Kunden-Markenfarbe. NICHT für Design-Entscheidungen im System (dafür gibt es semantische Tokens)

Horizontale Trennlinie, optional mit zentriertem Beschriftungstext

Icon auf getönter runder/eckiger Fläche (Untitled-UI-Muster Featured Icon) — Töne aus Status-/Primary-Tokens per color-mix abgeleitet

Überschrift der Ebenen 1–6 (anchor-Prop als Sprungziel für Inhaltsverzeichnisse)

Kuratiertes Inline-SVG-Icon-Set (Whitelist) — Größen über icon-Tokens, Farbe über currentColor/Ton

Reiner Icon-Button (Utility-Button): Varianten secondary/ghost/gefahr, Pflicht-aria-label, emittet activate

Bild mit URL-Whitelist, Seitenverhältnis und Platzhalter-Fallback bei unsicherer Quelle

16:9, cover

Quadratisch, große Rundung

Hochgestellter Quellen-Verweis im Fließtext — verlinkt auf den passenden Eintrag in component.sources, mit Titel als Tooltip

Einzeiliges Formularfeld mit Label, Zuständen (disabled, invalid) und Formular-Tokens

Universelle Listen-Zeile: Icon/Avatar-Fläche, Titel + Untertitel, Meta rechts, optionaler Chevron — Grundbaustein für Listen, Suchergebnisse, Auswahllisten

Tastenkürzel-Anzeige — „Strg+K" wird zu einzelnen Tasten-Kappen mit + dazwischen

Textlink mit URL-Whitelist — echte href-Navigation bleibt immer die Rückfallebene

Füllstands-Anzeige eines bekannten Bereichs (Speicher, Kontingent) — färbt sich nach Schwellwerten, im Unterschied zu ui.progress (Fortschritt eines Vorgangs)

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

Fortschrittsbalken (determiniert oder unbestimmt) mit Tönen und optionaler Wertanzeige

Serverseitig generierter QR-Code (SVG) — Belege, Zahlungs-Links, Geräte-Kopplung. Die Nutzdaten fließen nur ENCODIERT ein, nie als Markup

Mengenwahl mit −/+ und Zahleneingabe — progressive (Input funktioniert ohne JS), Controller klemmt auf min/max und emittet change

Radiobutton-Gruppe mit Optionen-Array — Gruppen-Logik im Element gelöst (ein name, eine Auswahl)

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

Relative Zeitangabe („vor 3 Minuten“, „in 2 Tagen“) als natives time-Element mit absolutem Titel — serverseitig berechnet, now-Prop hält Demos deterministisch

Sanitisierter Rich-Text: Fliesstext-Semantik (h3-h6, Listen, Tabellen, mark/kbd/sub/sup/abbr/time, dl, figure) + Ton-Spans aus festem Vorrat (data-tone)

Auswahlfeld (native select) mit Optionen-Array, Zuständen und Formular-Tokens

Lade-Platzhalter (schimmernde Fläche) für Text, Blöcke und Kreise

Nativer Range-Slider mit Token-Styling und Live-Wertanzeige — funktioniert ohne JS, Controller aktualisiert Anzeige und emittet change

Rotierender Ladeindikator mit Größen und Screenreader-Label

Zustands-Punkt mit Beschriftung (online, beeinträchtigt, offline, wartend) — Punkt pulsiert optional; Farben aus Status-Tokens

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

An/Aus-Schalter (Toggle) — checkbox-Semantik mit Switch-Optik über Tokens

Fließtext-Absatz mit Ton und Größe

Mehrzeiliges Formularfeld mit Label, Zuständen und Formular-Tokens

Auf-/zuklappbare Einträge (items-Array) — Grundlage für FAQ; toggle als semantisches Event

Aktivitäten-Feed mit Zeitleiste: Initialen-Kreis, Akteur + Aktion + Ziel, Zeitstempel — Verbindungslinie aus Tokens

Jahres-Raster nach GitHub-Muster: eine Kachel je Tag, Intensität in fünf Stufen aus einem Ton-Token, Wochentag- und Monats-Beschriftung, Legende und Gesamtzahl

Steckbrief eines Agenten: Name, Rolle, Zustand, Modell, Werkzeug-Badges und Kennzahlen — für Agenten-Übersichten und Team-Ansichten

Zeilenweise Änderungs-Ansicht (hinzugefügt/entfernt/Kontext) mit Datei-Kopf und Zähler — der Konsument liefert annotierte Zeilen, das Framework rechnet keine Diffs

Hinweis-Box in vier Tönen mit Icon, optional schließbar

Liste, deren Einträge nacheinander einlaufen (Benachrichtigungs-Demos, Feature-Aufzählungen): Icon-Fläche, Titel, Text, Zeit — mit prefers-reduced-motion-Rückfall

Seitenbreite Ankündigungsleiste mit Ton-Varianten, optionalem Link und Schließen-Knopf — geschlossen bleibt sie pro Sitzung zu (storageKey)

Pfadnavigation (items-Array, letzter Eintrag = aktuelle Seite ohne Link)

Voller Monatskalender (Mo–So): Termine als Punkte mit Label, Heute-Markierung, optionale Vor/Zurück-Links — serverseitig gerendert, Monat als Prop

Hervorgehobener Hinweis im Fliesstext (Ton aus festem Vorrat: info/success/warning/danger) mit optionalem Titel und Rich-Text-Inhalt

Inhaltskarte mit Media-, Inhalts- und Footer-Slot

Bilder-Carousel auf scroll-snap-Basis: ohne JavaScript horizontal wischbar, der Controller ergänzt Pfeile, Punkte und Tastatur — kein Autoplay (bewusst)

Drei Folien mit Untertiteln

Zeitleiste der Denk-Schritte eines Agenten: Schritt-Punkte mit Titel, Detailtext und optionaler Quellen-/Werkzeug-Angabe — als Ganzes einklappbar

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

Marke im Verlauf, zu der zurückgesprungen werden kann: Linie mit Label, Zeitangabe und Zurücksetzen-Knopf

Radio- oder Mehrfachauswahl als Karten mit Titel, Beschreibung, optionalem Icon und Badge — Tastatur-fähig, emittiert selection

Code-Fenster im Syntax-Stil: dunkle Flaeche in jedem Theme (color.code.*-Tokens), Traffic-Dots, Dateinamen-Tab, Kopieren-Knopf, Zeilennummern, serverseitiges Syntax-Highlighting (php/js/json/bash/html/css)

// Tür 1: Framework als Bibliothek
$rows = kunden_rest_list(['limit' => 25]);
echo invisible_render_id('component.table', [
    'columns' => $spalten,
    'rows'    => $rows,
]);

{
  "id": "ui.button",
  "version": "1.0.0",
  "targets": ["web.document"],
  "copyable": true,
  "order": 12
}

Foundations
└── Layouts
    └── UI Elements

const evil = '<script>alert(1)</script>';

Verifizierungs-Code-Eingabe (4/6/8 Stellen): Einzelzellen mit Auto-Weiterspringen, Backspace zurück, Einfügen verteilt — der Wert landet gesammelt in einem versteckten Feld

Einzelauswahl mit Suchfilter und Options-Panel: Tastatur-Navigation (Pfeile/Enter), Escape/Außenklick schließen, optionale Beschreibungen pro Option

Command-Menu / Docs-Suche: Strg/Cmd+K oder Öffner-Button, Suchfilter (inkl. unsichtbarer keywords), Pfeiltasten + Enter, Gruppen und Kürzel — Eintrag MIT href navigiert (Progressive-Fallback), ohne href emittet er command

Zwei Fassungen übereinander mit Schieberegler: Vorher links, Nachher rechts, Griff per Maus/Tastatur — für Bild- oder Text-Vergleiche

Rückfrage vor einer folgenreichen Agenten-Aktion: Beschreibung, Details-Liste, Zustimmen/Ablehnen — nach der Wahl bleibt die Entscheidung sichtbar

Auslastung des Kontextfensters: Balken mit belegten/freien Token, Warn-Ton ab Schwellwert, optional Kosten und Modell-Angabe

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

Scrollender Chat-Verlauf: hält den Blick am unteren Rand, zeigt beim Hochscrollen einen Zurück-nach-unten-Knopf — nimmt Nachrichten und AI-Bausteine im Slot auf

Grosser Call-to-Action — komponiert im Component Builder auf ui.button

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

Detail-Ansicht eines Datensatzes als Begriff/Wert-Zeilen (dl/dt/dd) — Werte-Arten text/badge/muted/code/link, ein- oder zweispaltig, optional gestreift

Mehrstufiger Dialog (Wizard): gestapelte Ebenen mit Zurück/Weiter, hintere Ebenen bleiben versetzt sichtbar — Escape schließt, emittiert step und finish

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

Auslöser-Button mit Aktionsmenü — Outside-Click und Escape schließen, select als semantisches Event

Rich-Text-EINGABE mit Werkzeugleiste (fett, kursiv, unterstrichen, Überschrift, Listen, Zitat, Code, Link) — erzeugt genau das HTML, das der Sanitizer erlaubt; Gegenstück zur Anzeige ui.richtext

Zentrierter Leerzustand (Untitled-UI-Muster): Icon-Fläche, Titel, Text, Primär- und Sekundär-Aktion — für leere Listen, Suchergebnisse, Erststarts

Formular-Gruppierung (fieldset/legend): fasst zusammengehörige Felder mit Überschrift und optionalem Hinweis zusammen — disabled deaktiviert alle Kinder nativ

Upload-Zone (Untitled-UI-Muster): Klick oder Drag-and-Drop, Dateiliste mit Größe und Entfernen — Prototyp ohne Server-Upload, emittet dateien

Filter-Bar über Tabellen/Listen: Suchfeld + Filter-Buttons mit Options-Panels + Zurücksetzen — Controller pflegt aktive Filter, emittet filter

Sammelt Eingabe-Bausteine und schickt sie an einen BENANNTEN Vorgang (kernel/operations.php). Kein Ziel, keine URL im Seiten-JSON — nur ein Name, der in der Weissliste stehen muss.

Projekt-Zeitplan als Balkendiagramm: Zeilen mit Aufgaben, Zeitachse in Tagen/Wochen, farbige Balken (Ton aus Tokens), Fortschritts-Füllung, Heute-Linie und Meilenstein-Rauten

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

Klickbares Bild öffnet ein Vollbild-Overlay (Backdrop, Escape/Klick schließt, Scroll-Lock) — ohne JS bleibt es ein normales Bild

Bild mit Zoom (klicken → Vollbild)

Getrennte Vorschau/Vollbild-Datei

Eingabefeld mit Prefix-/Suffix-Addons im gemeinsamen Rahmen (€-Zeichen, Einheiten, Icons) — der Bootstrap-input-group-Fall für Preis- und Einheitenfelder

Spalten-Board mit Karten (Titel, Beschreibung, Badge, Zugewiesene, Link) — horizontal scrollbar; draggable-Prop schaltet Drag & Drop + Tastatur (Strg+Pfeile) frei

Gerahmte Eintragsliste (Bootstrap list-group): Einträge mit Titel, Beschreibung, Badge und optionalem Link — aktiv/deaktiviert je Eintrag

Klassische Desktop-Menüleiste (Datei, Bearbeiten, Ansicht …): Menüs mit Einträgen, Kürzeln, Trennern und Gefahr-Ton; Tastatur-fähig, öffnet bei Hover wenn ein Menü offen ist

Chat-Nachricht: Nutzer als Blase rechts, Assistent als Fließtext links mit Avatar; optionale Anhänge, Aktions-Leiste (Kopieren, Bewerten, Neu erzeugen) und Zeitstempel

Dashboard-Kennzahl (Untitled-UI-Muster): Label, großer Wert, Delta-Badge mit Richtung (steigend grün / fallend rot), Vergleichstext

Kompakter Tagesstreifen für Kopfleisten: waagerechte Tage mit Wochentag, Markierungs-Punkten für Termine, Blättern vor/zurück — Auswahl meldet das Datum

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

Kompakte Modell-Auswahl für die Chat-Leiste: aktuelles Modell als Knopf, Panel mit Anbieter-Gruppen, Beschreibung und Merkmal-Badges

Multi-Select mit Chips im Feld, Suchfilter und Options-Panel (Untitled-UI-Muster) — Controller pflegt Auswahl, Escape/Außenklick schließen, emittet auswahl

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

Zahl, die bei Wertänderung zum neuen Wert zählt (deutsches Format) — Server rendert den Endwert; mit [data-motion=reduce] am Konsumenten springt er sofort

App-Seitenkopf (Untitled-UI-Muster): Titel + Beschreibung links, Aktions-Buttons rechts (Varianten wie Nav-Aktionen), optionale Trennlinie

Blaettern zwischen benachbarten Seiten (Docs-Kapitel): links Zurueck, rechts Weiter — beide optional

Blättern durch Seiten (Fenster mit Auslassungen) — navigate mit Seitenzahl als Payload

Vorhaben eines Agenten vor der Ausführung: nummerierte Schritte mit Werkzeug-Angabe und Zustand, optional Freigabe-Leiste am Fuß

Generischer verankerter Overlay: Klick auf den Auslöser öffnet ein Panel mit freiem Slot-Inhalt — schließt bei Außenklick und Escape. Für reine Hover-Vorschau component.hover-card, für Menüs component.dropdown

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

Thumbnail-Spalte + Hauptbild — Controller wechselt das Hauptbild beim Thumbnail-Klick; ohne Bilder rendern Platzhalter-Flächen

Wizard-Fortschritt (Untitled-UI-Muster): erledigte Schritte mit Häkchen, aktiver hervorgehoben, kommende gedämpft — Verbindungslinien aus Tokens

Chat-Eingabe: mitwachsendes Textfeld, Enter sendet (Umschalt+Enter = Zeilenumbruch), Werkzeugleiste (Anhang, Modell) und Senden/Stop-Knopf

Anstehende Aufträge eines Agenten: Position, Titel, Zustand (wartet/läuft) und Entfernen-Knopf — für Batch-Läufe und Hintergrund-Aufgaben

Einklappbarer Denk-Block des Modells: Kopfzeile mit Dauer und Zustand (denkt / fertig), Inhalt als gedämpfter Text — natives details/summary, kein JS nötig

Zwei Bereiche mit ziehbarem Teiler (horizontal oder vertikal) — Maus/Touch per Pointer-Capture, Tastatur mit Pfeiltasten, Grenzen über min/max

Umschalter aus verbundenen Segmenten (genau eine Auswahl) — für Ansichts-/Modus-Wechsel; als Formularwert über das name-Feld, Tastatur mit Pfeiltasten

App-Seitenleiste (Untitled-UI-Muster): Marke, gruppierte Nav-Einträge mit Icons + Badges, Fußbereich mit Nutzer — einklappbar (Controller), aktiver Eintrag hervorgehoben

Einzeiliger Befehl mit Prompt-Zeichen und Kopieren-Knopf, optional mit Reitern (npm/pnpm/yarn) — Docs- und Onboarding-Baustein

Liste mit Gruppen, deren Einträge per Ziehen oder Tastatur (Pfeile mit Strg) umsortiert und zwischen Gruppen verschoben werden — meldet jede Umsortierung

Einklappbare Quellenliste unter einer Antwort: nummerierte Einträge mit Titel, Domain und optionalem Auszug — passend zu ui.inline-citation im Text

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)

Am unteren Rand fixierte Kaufleiste: Titel + ui.price + Warenkorb-CTA — erscheint erst nach dem ersten Scroll-Viewport (Controller)

Anschluss-Fragen als Pillen unter der Antwort oder über der Eingabe — Klick meldet den Text zur Übernahme in die Prompt-Eingabe

Segmentierte Pill-Tab-Leiste (Atlassian-Collections-Muster): Leiste auf sunken-Fläche, aktiver Tab als Secondary-Pill — progressive Links, optional zentriert

Datentabelle aus columns/rows-Props — gestreift, dicht, mobil horizontal scrollbar, Sticky-Kopf + Spalten-Pinning

Reiter mit Panels (bis 4) — lokaler Zustand im Controller, semantisches Event change

Freie Schlagwort-Eingabe: Enter/Komma legt einen Chip an, Backspace im leeren Feld entfernt den letzten, optionale Vorschlagsliste — emittiert tags

Was der Agent gerade abarbeitet: Aufgaben mit Zustand (offen/läuft/fertig/Fehler), optionalen Unterpunkten und Fortschritts-Zeile

Terminal-Fenster mit Fenster-Punkten und Zeilen-Typen (Befehl, Ausgabe, Erfolg, Fehler, Hinweis); Zeilen erscheinen nacheinander (abschaltbar, respektiert prefers-reduced-motion)

$ npm run buildtokens: 179 Referenz-, 76 semantische Tokens, 10 Themesregistry: 128 Definitionenassets: 98 CSS-, 34 JS-ArtefakteBuild erfolgreichHinweis: 2 Definitionen ohne llm.md

$ npm test235 bestanden, 1 fehlgeschlagen

Segmentierter Umschalter Hell/Dunkel/System — setzt data-theme am Dokument, merkt sich die Wahl (localStorage) und folgt der Systemeinstellung

Durchlaufende Daten-Zeile (Kurse, Kennzahlen, Meldungen) mit Wert und Veränderungs-Ton — pausiert bei Hover; mit [data-motion=reduce] am Konsumenten statische scrollbare Zeile

„Auf dieser Seite"-Liste mit Anker-Links (items-Array) und Scrollspy: der sichtbare Abschnitt wird beim Scrollen markiert (ohne JS statische Liste)

Aufruf eines Agenten-Werkzeugs: Name, Zustand (wartet/läuft/fertig/Fehler), einklappbare Eingabe- und Ergebnis-Blöcke — natives details, kein JS

{
  "filter": "overdue",
  "limit": 10
}

2 Treffer:
#4712 Beispiel AG (3 Tage überfällig)
#4718 Muster GmbH (1 Tag überfällig)

{"query": "Rückgabefrist"}

Verbindung abgelehnt (Port 587)

Hinweis-Blase bei Hover/Fokus — rein CSS (kein JS), Ebene über layer.dropdown

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

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

Video mit eigener Bedienleiste aus Tokens: Abspielen/Pause, Fortschritt mit Klick-Sprung, Zeitangabe, Ton, Vollbild — nutzt das native video-Element, kein Fremd-Player — v1.1: Leiste per Drag scrubbing-fähig

Desktop-Fensterrahmen mit Titelleiste und Controls — Inhalt via contentMode (legacy-iframe | integrated-page) ab Phase 5

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

Aufruf-Banner mit Titel, Text und Button-Slot — brand- oder neutral-getönt, mobil kompakt

Einstiegs-Hero fuer Dokumentationen im Syntax-Stil: Navy-Band (color.code.*-Welt) mit Schaltkreis-Raster und Glow-Knoten, Eyebrow, Titel, Leadtext, Aktions-Pills und Code-Fenster rechts

echo invisible_render_id('ui.button', [
    'label' => 'Speichern',
]);

Fragen-Accordion auf nativen details/summary-Elementen (kein JS): Sektions-Kopf + Haarlinien-Trenner, Chevron dreht im offenen Zustand

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

Feature-Kacheln mit Icon, Titel und Text — auto-fit-Raster, mobil eine Spalte

Seitenfuß mit Marke, Link-Spalten und Copyright-Zeile — Spalten stapeln mobil

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

Standard-Aufteilung 8/4 ab md, darunter gestapelt. Zeigt zugleich, wie die Spannweite am Kind gesetzt wird.

Große Einstiegs-Section mit Titel, Untertitel und Aktions-Slot

Zentrierter Hero: zweizeiliger Display-Titel, horizontale Häkchen-Zeile, Primary- + Ghost-CTA, Plattform-Leiste in Mono — ton-neutral, Theme liefert Farben und Schrift-Familien

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

Referenz-Logos in einer fluiden Reihe (gedämpft, Hover farbig)

Vier Logos

Vertraut von

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

Text-Bild-Wechselzeile: Display-Titel + Text + Text-Link-CTA neben einer Media-Fläche (Bild oder Platzhalter-Fläche), Seite wählbar

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

Preispläne als Karten (Highlight-Plan hervorgehoben) — auto-fit-Raster, mobil gestapelt

Responsives Grid aus Produkt-Karten (auto-fill) mit optionalem Sektions-Kopf — für Empfehlungen, Kategorien, Suchergebnisse

Der Kopf der Produktdetailseite: Produkt-Galerie | Kaufbox (Titel, Sterne, Preis, Varianten-Picker, Mengen-Stepper, Warenkorb-CTA mit cart-Event, Trust-Punkte)