Profile cardPro
A portrait whose details rise into a glass panel on hover.
JB
Jasmine Brooks
Design lead, Lisbon
When to use
- Showcasing a person: mentors, speakers, team pages.
When not to use
- Dense member lists: use a table or avatar group.
Installation
Usage
Import it from @/components/ui/profile-card after installing.
example.tsx
import { ProfileCard } from "@/components/ui/profile-card";
export function Mentor() {
return <ProfileCard name="Jasmine Brooks" role="Design lead" bio="Leads design systems at Meridian." stats={[{ label: "Sessions", value: "128" }]} />;
}API reference
ProfileCard
A portrait card whose details rise into a glass panel on hover or focus.
| Prop | Type | Default | Description |
|---|---|---|---|
| name / role / bio | string | – | Identity. |
| stats | { label; value }[] | – | Up to three figures. |
| rating | number | – | Optional star score. |
| src / hue | string / number | – | Portrait image, or a generated portrait. |
| primaryAction / secondaryAction | string | "Follow" / "Book a session" | Button labels. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Focusing the card reveals the details |
Accessibility
- The card is focusable so keyboard users get the same reveal.
Motion
- The panel grows with layout animation; the card lifts 4px on hover.
Responsive behavior
- 288px wide.
Performance
- Portrait is a plain <img>; use an optimized source.
Notes for AI
- Wire primaryAction to your follow API.
This page as Markdown, for assistants and coding agents:
/components/profile-card/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt