#940
Profile mention
A sentence with an @ada mention link that opens a profile card with a name, a line of detail and a View profile link on hover or keyboard focus.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Profile mention" pattern (@codeatlasdev/ui demo #940, navigation/hover-card) in my app.
Call get_demo({ ids: ["#940"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Previewing a person, link target or record inline without leaving the page; the link itself stays the primary action.
Keep these library parts, with the props and tokens the demo uses:
- Avatar, HoverCard, Stack from "@codeatlasdev/ui"
Behaviour to keep:
- `<HoverCard>` with `{#snippet triggerChild(props)}<a class="mention" href="#ada" {...props}>@ada</a>{/snippet}`
- Content is `<Stack gap="2">` with a strong name, a secondary line and `<a class="more" href="#ada-profile">View profile</a>`
- Default delays: the pointer waits 700 ms to open, keyboard focus opens at once; Escape closes
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `<HoverCard>` with `{#snippet triggerChild(props)}<a class="mention" href="#ada" {...props}>@ada</a>{/snippet}`
- Content is `<Stack gap="2">` with a strong name, a secondary line and `<a class="more" href="#ada-profile">View profile</a>`
- Default delays: the pointer waits 700 ms to open, keyboard focus opens at once; Escape closes
Related
Loading source.