Atomare Komponenten

Visuelle Referenz der 5 atomaren Komponenten der Phase 2: Button, Input, Badge, Icon, Card.

Button

3 Varianten × 3 Größen + Zustände disabled / loading + Icons.

Varianten

Größen

Zustände

Mit Icons

Volle Breite

Input

Text- oder Select-Feld mit Label, Hilfe, Fehlerzustand.

Wir geben Ihre E-Mail niemals weiter.

Maximal akzeptable Monatsrate.

Schreibgeschützt.

Badge

6 semantische Varianten × 2 Größen. Optionales Icon.

Varianten

Default Empfohlen Neu Bestätigt Achtung Fehler

Größen

Small Medium

Mit Icons

Elektrisch Benzin Verifiziert Info

Icon

Leichter Wrapper um lucide-vue-next. 22 gemappte Icons.

Katalog

arrow
arrow-left
check
close
loader
chevron-down
chevron-up
chevron-left
chevron-right
menu
search
alert
info
help
external
plus
minus
car
euro
zap
fuel
settings

Größen

Card

3 Varianten × 4 Innenabstände. Statische Komponente.

Varianten

Default

Leichte Umrandung + dezenter Schatten. Üblicher Einsatz.

Elevated

Stärkerer Schatten. Prominente Cards (Hero, Ergebnis).

Outlined

Nur Umrandung, kein Schatten. Dezenter.

Innenabstände

padding="none"

padding="sm" (16px)

padding="md" (24px, Standard)

padding="lg" (32px)

CarPIQ V2 — Atomare Komponenten · Startseite · Design Tokens