When to use
Section titled “When to use”- To summarise where a link in running text goes without leaving the page: a help article, a merchant or a record.
When not to use
Section titled “When not to use”- When the preview holds actions or a form: use Popover; a PreviewCard cannot be entered with the keyboard.
- To explain a term: use InfoPopover or Tooltip.
- As the only source of information on touch screens: there is no hover; the destination page must hold the information too.
Anatomy
Section titled “Anatomy”- Link: a native
<a href>with the inline Link look. - Card: the preview, on the Popover surface, opened next to the link.
Behaviour
Section titled “Behaviour”- The card opens after
delay(600 ms) on hover or focus, and closes aftercloseDelay(300 ms) when the pointer leaves. - The card stays open while the pointer is on it.
- Focus stays on the link; the card is not in the tab order. Escape closes it.
- Unsafe
hrefschemes are dropped, as in Link.
Guidelines
Section titled “Guidelines”- Make the link text meaningful on its own; the preview is extra.
- Keep the card short: a title, two lines of summary, a date.
- Do not put several preview links in one paragraph.
Content
Section titled “Content”- The title is the name of the destination page.
- The summary says what the destination is; it has no instructions such as “click”.