Understanding

SemanticAnchor

An underlined term inside a peek (or a Go deeper facet) and its definition card — the next level of detail for one word.

• Provide word (the term), description (one or two sentences), optional children (the text as it appears, if it differs in case or form), knowMoreUrl, color (the idea's topic) and onGoDeeper (opens GoDeeper for the term).
• Trigger: the term is a real button inside the sentence — dotted underline in link, 1.5px, offset 3px — so it is reachable by Tab and announced with aria-expanded.
• Mouse: hover for 250ms opens the card; it stays while the pointer is over the term or the card and closes 300ms after leaving (WCAG 1.4.13: hoverable, persistent, dismissible). Click pins it and moves focus to its first action. Keyboard: Enter/Space opens and focuses it, Escape closes and returns focus. Touch: inside a VisualMap sheet, onActivate swaps the sheet to the definition with ‹ back (no popover over a finger); standalone, a tap opens the card.
• Card (AnchorCard): eyebrow TERM, the word in the hand face, the definition, then Learn more ↗ and Go deeper. Smaller than a peek (300px), same hand-cut family with the topic's offset sheet; it nudges itself to stay inside the viewport.
• Definitions don't nest: a term's card never underlines further terms — that exploration belongs to Go deeper.

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface SemanticAnchorProps {
  word: string;
  children?: ReactNode;
  description: ReactNode;
  knowMoreUrl?: string | null;
  color?: NodeColor;
  onGoDeeper?: () => void;
  onActivate?: () => void
}

Use

import { SemanticAnchor } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/SemanticAnchor/README.md