On this page
Overview
Show code, DocumentPreview.tsx
Variants
Widths
The card is as wide as its content, within its width's range, and narrows to fit the window.
- Medium
A short summary, such as a document's last change. The default.
- Large
Richer details, such as a person with an avatar and a role.
Still picture, not live
Large, with an avatar beside the name.
Show code, PersonDetails.tsx
Placement
The card opens below its trigger, centred on it, or on another side or lined up with one end, such as above a link near the bottom of a pane.
Still picture, not live
Show code, Placement.tsx
Anatomy
Card
Trigger
Show code, HoverCardAnatomy.tsx
Behaviour
Hover and focus
The pointer can move from the trigger onto the card without closing it, and focus stays on the trigger.
Text triggers
Text that isn't a link can open a card too, with the dotted underline and the focus a tooltip on text takes.
Show code, TextDetails.tsx
Rules
Use it when
- A glance at what a link or a name refers to, such as a document's summary or a person's role
Supplementary details
Keep the details supplementary: the page the link leads to has them too.
Interactive content
No links, buttons or fields in the card: the keyboard and touch can't reach them.
Tooltips
No Tooltip around a hover card or as its trigger; put what it would say in the card.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Focus on the trigger opens the card at once; moving on closes it. |
| Esc | Closes the card and leaves focus on the trigger. |