# User Card Popover

> A profile hover card anchored to an avatar trigger, showing a photo avatar, name, handle, follower stats and a Follow button that toggles state — with viewport-aware positioning, opening on click and closing on Escape, focus-out or outside click.

- Category: Popover
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sienna
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: profile
- Page: https://builder.atheros.ai/components/user-card
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_user_card/preview-29af7d677971.webp

## Features

- Profile card anchored to an avatar+name trigger with a pointing arrow
- Opens on click, closes on Escape, outside pointerdown and focus-out with focus management
- Viewport-aware positioning: clamps horizontally and flips above the trigger near the bottom edge, repositioning on resize and scroll
- Photo avatar with an automatic initials fallback if the image fails to load
- Follow button that toggles state and live-updates the follower count
- Follower, following and model stat columns
- Fade-and-scale entrance driven purely by `transform` and `opacity`
- Light and dark appearances supplied by the browse host
- Responsive card that adapts down to 280px
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Dialog role** — Card uses `role="dialog"` with `aria-labelledby` pointing at the name
- **Trigger semantics** — Trigger uses `aria-haspopup="dialog"`, `aria-controls` and `aria-expanded`
- **Focus management** — Opening moves focus to Follow; Escape restores focus to the trigger
- **Toggle state** — Follow button exposes `aria-pressed` and an updated `aria-label`
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `Enter` — Activate the focused trigger or Follow button
- `Space` — Activate the focused trigger or Follow button
- `Escape` — Close the open card and return focus to the trigger
- `Tab` — Move focus between interactive elements

## Common questions

**Which frameworks is User Card Popover available in?**

User Card Popover ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is User Card Popover free?**

User Card Popover is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does User Card Popover support dark mode?**

Yes. User Card Popover ships light and dark themes, both drawn from the Sienna design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview User Card Popover live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/user-card

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt