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

Components v1.0.0 Overlays WebsiteAppDesktop component.hover-card

Beispiele

Link mit Vorschau (überfahren oder mit Tab fokussieren)
component.navigation

Eigenschaften

PropTypDefaultBuilder-Label
trigger *stringAuslöser-Text
hrefstring"#"Auslöser-Ziel
title *stringKarten-Titel
textstring""Karten-Text
metastring""Meta-Zeile
imageUrlstring""Vorschaubild

* Pflicht-Prop

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