Hover-Karte (Vorschau) — component.hover-card
Vorschau-Karte beim Überfahren/Fokussieren eines Auslösers (Link-Vorschau, Personen-Karte): Titel, Text, Meta-Zeile — mit Verzögerung, schließt bei Verlassen/Escape
Componentv1.0.1Overlayweb.documentweb.applicationdesktop.shellbuilder.preview
Beispiele
Link mit Vorschau (überfahren oder mit Tab fokussieren)
component.navigationNavigationKopfnavigation in zwei Menü-Formen: klassische Leiste oder Burger-Flyout.Eigenschaften
| Prop | Typ | Default |
|---|---|---|
trigger * | string | — |
href | string | "#" |
title * | string | — |
text | string | "" |
meta | string | "" |
imageUrl | string | "" |
Stellschrauben (Komponenten-Tokens)
| 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.hairline color.border.default color.surface.overlay color.text.default color.text.link color.text.muted elevation.overlay font.family.default layer.dropdown leading.base radius.control radius.surface size.1 size.2 size.3 size.32 text.md text.sm text.xs weight.semibold