Team Member
Andrea KimStaff engineerPlatform · Beste
Directory row with an avatar carrying a presence dot, name, title, department, and a message button.
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Card21 } from "@/components/beste/component/card21";
<Card21
name="Andrea Kim"
title="Staff engineer"
department="Platform · Beste"
initials="AK"
online
image="https://images.unsplash.com/photo-1556157382-97eda2d62296?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjg0fHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
/>The import and the props worth knowing about, in one place.
import { Card21 } from "@/components/beste/piece/card21";
<Card21
name="Andrea Kim"
title="Staff engineer"
department="Platform · Beste"
initials="AK"
online={true}
image="https://images.unsplash.com/photo-1556157382-97eda2d62296?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjg0fHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
/>Avatar with name, role, and a presence dot in emerald, amber, or slate.
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.
Mini org-chart card with a manager node branching down into three direct-report avatars.
Conference speaker card with an avatar and mic chip, talk title on a muted strip, and stage and time.
