Hover-Karte (Vorschau)

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

Im Builder nutzen

Beispiele

Link mit Vorschau (überfahren oder mit Tab fokussieren)

component.navigation

Eigenschaften

Prop	Typ	Default	Builder-Label
trigger *	string	—	Auslöser-Text
href	string	"#"	Auslöser-Ziel
title *	string	—	Karten-Titel
text	string	""	Karten-Text
meta	string	""	Meta-Zeile
imageUrl	string	""	Vorschaubild

* Pflicht-Prop

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
--hover-card-border-default	var(--color-border-default)
--hover-card-elevation-overlay	var(--elevation-overlay)
--hover-card-radius-control	var(--radius-control)
--hover-card-radius-surface	var(--radius-surface)
--hover-card-surface-overlay	var(--color-surface-overlay)
--hover-card-text-default	var(--color-text-default)
--hover-card-text-link	var(--color-text-link)
--hover-card-text-muted	var(--color-text-muted)

Genutzte Design-Tokens

border.hairlinecolor.border.defaultcolor.surface.overlaycolor.text.defaultcolor.text.linkcolor.text.mutedelevation.overlayfont.family.defaultlayer.dropdownleading.baseradius.controlradius.surfacesize.1size.2size.3size.32text.mdtext.smtext.xsweight.semibold