Designsystem · Vanilla CSS & JS

Eine visuelle Referenz für velocity-css.

Diese Demo zeigt die öffentlichen Grundlagen, Layoutwerkzeuge und Komponenten in realistischen Zuständen – responsiv sowie in Light und Dark.

Grundlagen ansehen Komponenten öffnen

Demo-Bereiche

Jede Seite konzentriert sich auf eine klar abgegrenzte Ebene der Bibliothek.

LayoutContainer, responsive Spalten, Reihenfolge und Flex-Ausrichtung. KomponentenNavbar, Navigation, Dropdown, Collapse, Tabs und Accordion. ComboboxClient, Remote, Einzel- und Mehrfachauswahl mit Event-Diagnose. IconsDurchsuchbarer Katalog aller generierten SVG-Assets.

Typografie

Überschriften, Fließtext, Inline-Elemente, Listen und Zitate.

Hierarchie

Überschrift H1

Überschrift H2

Überschrift H3

Überschrift H4

Überschrift H5
Überschrift H6

Fließtext und Inline-Stile

Velocity liefert eine ruhige Grundtypografie mit Links, starker Betonung, Hervorhebung, Markierung, Kleindruck und Inline-Code.

Gute Defaults machen den häufigsten Fall zum einfachsten Fall.

Listen

  • Ungeordneter Eintrag
  • Eintrag mit Unterpunkt
    • Verschachtelte Ebene
  • Letzter Eintrag
  1. Analysieren
  2. Implementieren
  3. Verifizieren

Farben und Flächen

Semantische Tokens reagieren automatisch auf das gewählte Theme.

Primary
--vlx-color-primary
Surface
--vlx-color-surface
Muted
--vlx-color-surface-muted
Text
--vlx-color-text

Buttons

Primäre, sekundäre und native Zustände.

Link-Button

Formulare

Eingaben, Auswahlfelder, Checks und Validierungszustände.

Content-Primitives

Cards, Tabellen und Codeblöcke.

Card

Ein neutraler Container für zusammengehörige Inhalte und Aktionen.

KomponenteStatus
CoreStabil
ComboboxBeta
IconsStabil
<link rel="stylesheet" href="dist/css/theme.css">
<script src="dist/js/bundle.js" defer></script>