Rittek UI · Werkbank / 01
Eine Komponente.
Deine Handschrift.
Wähle Form, Variante und Text. Die Vorschau zeigt exakt die Komponente aus dem HTML darunter – im aktuellen Farbschema deiner Dokumentation.
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<button type="button" class="r-button r-button-primary">Projekt starten</button>Bereit. Änderungen bleiben nur in dieser Vorschau.
Vom Entwurf in deine Seite
Kopiere das HTML in eine HTML- oder PHP-Seite. Der enthaltene Link lädt rittek.css; falls dein Layout diese Datei bereits einbindet, genügt das Element darunter. Die Komponenten brauchen weder configurator.js noch rittek.js. Farben, Schrift und Dichte folgen den Tokens deiner Zielseite; die Einstellungen dieser Dokumentation werden nicht in den Code geschrieben.
Beim Wechsel der Komponente werden unpassende Varianten, Größen und disabled entfernt. Card und Input bieten in dieser Werkbank Standard; Alert zusätzlich Gefahr. Es werden ausschließlich vorhandene Klassen erzeugt.
Der Input besitzt eine echte Beschriftung mit fester Beispiel-ID configured-field. Vergib beim mehrfachen Einfügen pro Feld eine eindeutige ID und passe das for-Attribut an. Der Vorschau-Button hat type="button" und führt keine Aktion aus. Das Alert ist ein statischer Hinweis mit role="note".
Der aktuelle Quellcode bleibt nach Änderungen bewusst schlichter Text, damit Kopieren und Darstellung immer den neuesten Stand zeigen. Diese Werkbank speichert keine Eingaben und ändert keine globalen Tokens.