# Profile Card

> An editorial profile card gallery — real portraits, skeleton loading, tabular stats, skill chips, and a follow toggle that persists across reloads, all rendered from an async API seam. Sora display type over Inter body on a cool fog canvas.

- Category: Profile
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Ember Studio
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: cards, avatar, editorial
- Page: https://builder.atheros.ai/components/profile-card
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_profile_card/preview-8223039fbcd6.webp

## Features

- Data-driven cards rendered from `js/data.js` through an async `fetchProfiles()` API seam
- Real portrait photos (optimized local WebP) with automatic initials-disc fallback on load error
- Skeleton loading state with a token-driven shimmer while profiles are fetched
- Cobalt filled verified badge (Tabler rosette-discount-check-filled, `--info` token) with a brighter dark-mode twin
- Online / away / offline status dot on each avatar
- Stats row with Posts, Followers, and Following counts set in tabular numerals
- Skill chips with wash hover feedback — no lift or scale anywhere, color-only hovers
- Cross-theme contrast-safe chip and stat-label ink retains accent/neutral character while clearing AA at 11px
- Follow toggle button with `aria-pressed`, a springy press scale, and a live follower count
- Follow state persists across reloads via `localStorage`
- Icon-only Message button with explicit `aria-label`
- Polite live feedback for follow/message actions, visible load errors, and a real empty state
- Abstract layered-gradient banner art per card (aurora, tide bands, prism beams) — pure CSS, fully token-driven so it retones with any design system
- Equal-height cards with the stats row, chips, and actions pinned to a shared baseline across the grid
- Cool-dusk dark mode — deep blue-charcoal surfaces from dedicated `night-*` design tokens instead of generic gray
- Theme follows the OS preference on load and persists any explicit choice; the gallery toolbar drives toggling
- Keyboard-accessible controls with `:focus-visible` ring

## Accessibility

- **ARIA labels** — Follow and icon-only Message buttons carry explicit per-profile `aria-label`
- **Follow toggle** — Real `<button>` with `aria-pressed` toggled and persisted by JS
- **Loading state** — Grid announces `aria-busy="true"` during skeleton, `false` after render; skeletons are `aria-hidden`
- **Avatar photos** — `<img>` with descriptive `alt` ("Portrait of …"), initials fallback on load error
- **Verified badge** — Inline filled SVG with `role="img"` and `aria-label="Verified profile"`
- **Status dot** — Static `role="img"` with `aria-label` (Online/Away/Offline)
- **Theme** — Follows OS `prefers-color-scheme` on first visit; explicit choice persisted
- **Focus indicators** — `:focus-visible` with contrast-safe `--prf-focus-ink` outline on all elements
- **Action feedback** — Follow/message actions announce through a polite live region; persistence failures explain that the session still works
- **Async states** — Skeleton uses `aria-busy`; empty results render explicit copy; module/render failures expose a visible alert with a recovery action
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Viewport** — `100dvh` for mobile-safe viewport height

## Keyboard shortcuts

- `Enter` — Activate the focused follow or message button
- `Space` — Activate the focused follow or message button

## Common questions

**Which frameworks is Profile Card available in?**

Profile Card 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 Profile Card free?**

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

**Does Profile Card support dark mode?**

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

## Get the code

Preview Profile Card 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/profile-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