Hover card

A preview card that appears on hover or focus.

Left out of Content first Readers arrive on phones and laptops alike, and touch screens have no hover. Occasional visitors need visible words, not hidden previews. Use instead: Card, Collapsible

See it live

Start Storybook to see it live: npm run storybook

Live from StorybookOpen Hover card in StorybookSee it in dark

When to use it

• Use it when: A quick look at a person or link for people with a mouse, with the same detail reachable on click.
• Not when: The only way to see the content: touch screens have no hover.

Instead:

• Popover: Opens on click, works on touch.
• Tooltip: A one-line hint.

Words

• Write to one person: "you", not "users".
• Short sentences with room to breathe.
• Explain why before asking for anything.
• Use: Read, Save for later, You, Next issue. Avoid: Click here, Submit, Users, Content.

The labels components use, from the voice tokens:

• content.action.commit: Save
• content.action.cancel: Not now
• content.action.destroy: Remove
• content.action.retry: Try again
• content.action.empty-action: Browse guides

See Voice and tone for the whole voice.

Use it in code

npx open-ds add hover-card

The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.

Tokens it reads

Hover card reads 6 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Hover card's tokens to change Hover card alone.

Changes with theme

Content first decides what changes when you switch theme. Here a switch changes colors only, so the marked rows differ between light and dark; everything else holds steady.

Part	Its token and the semantic it aliases	Value
Shared
Transition panels duration	component.transition.panels-durationmotion.duration.panelsvar(--transition-panels-duration)	duration.relaxed:320ms
Content
Corner	component.hover-card.content.radiusradius.controlvar(--hover-card-content-radius)	radius.8:0.5rem
Fill Changes with theme	component.hover-card.content.backgroundcolor.surface.raisedvar(--hover-card-content-background)	Lightstone.light.0:#FFFFFFDarkstone.dark.100:#2E2A24
Padding	component.hover-card.content.paddingspace.inset.containervar(--hover-card-content-padding)	space.24:1.5rem
Text Changes with theme	component.hover-card.content.labelcolor.text.primaryvar(--hover-card-content-label)	Lightstone.light.900:#1F1B16Darkstone.dark.900:#FFFDF8
Shadow Changes with theme	component.hover-card.content.shadowelevation.overlayvar(--hover-card-content-shadow)	Lightshadow.overlayDarkshadow.overlay-dark
From the system
Edge Changes with theme	color.border.default straight from the system, through --border	Lightstone.light.200 · #E4DDD0Darkstone.dark.100 · #2E2A24