Speaker Card
Dr. Nour El-AminChief scientist · Altura
Agents in medicine: cautious optimism
Keynote · Hall AFri, May 8 · 10:00
Conference speaker card with an avatar and mic chip, talk title on a muted strip, and stage and time.
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Card27 } from "@/components/beste/component/card27";
<Card27
name="Dr. Nour El-Amin"
org="Chief scientist · Altura"
talkTitle="Agents in medicine: cautious optimism"
stage="Keynote · Hall A"
time="Fri, May 8 · 10:00"
initials="NE"
image="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=120&auto=format&fit=crop"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Hover | The card lifts and the image scales inside its frame; `motion-reduce` turns the movement off. |
|---|
The import and the props worth knowing about, in one place.
import { Card27 } from "@/components/beste/piece/card27";
<Card27
name="Dr. Nour El-Amin"
org="Chief scientist · Altura"
talkTitle="Agents in medicine: cautious optimism"
stage="Keynote · Hall A"
time="Fri, May 8 · 10:00"
initials="NE"
image="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=120&auto=format&fit=crop"
/>
Directory row with an avatar carrying a presence dot, name, title, department, and a message button.
Designing the tooling that ships millions of components every week.
User profile card with a gradient avatar, role, location, a short bio, and a trailing social icon button.
Priya Nandan
Migration engineer
Free from 09:30 today
A person card pairing a portrait with a name and role, a colour-coded availability line, and a few hairline facts about the call.
Avatar with name, role, and a presence dot in emerald, amber, or slate.