# Glass Profile

> A glassmorphism profile card — a full-bleed portrait is the surface and a translucent dark scrim panel carries the name, verified badge, bio, highlight stats, and compact CTAs, with a photo-to-initials fallback.

- Category: Card
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Vector
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: profile
- Page: https://builder.atheros.ai/components/glass-profile
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_glass_profile/preview-bbf5121a59ed.webp

## Features

- Full-bleed portrait surface with a translucent dark scrim panel (glassmorphism via `backdrop-filter: blur`) reading over the lower photo
- Photo-to-initials fallback — a warm gradient with monogram initials shows when the image fails to load
- Identity block with the name and an azure verified rosette over the glass
- Highlight row with a star-rated Review value plus Revenue and Rate figures
- Compact "Get In Touch" CTA and bookmark button set in the display typeface
- Skeleton-loading entrance state with a transform-based shimmer
- Responsive layout down to 280px, honoring `prefers-reduced-motion`

## Accessibility

- **ARIA labels** — All interactive elements have `aria-label` or visible text
- **Bookmark button** — `<button>` with `aria-pressed` reflecting saved state
- **Focus indicators** — `:focus-visible` with `--ring` outline on all elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Viewport** — `100dvh` for mobile-safe viewport height

## Keyboard shortcuts

- `Enter` — Toggle light/dark mode when the switch is focused
- `Space` — Toggle light/dark mode when the switch is focused

## Common questions

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

Glass Profile 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 the Glass Profile card component free?**

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

**Does Glass Profile support dark mode?**

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

## Get the code

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

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