Lanyard Badge Card
Beste Conf 2027
Deniz Arslan
Creative Director
SpeakerATT-0087
Beste Conf 2027
Deniz Arslan
Creative Director
SpeakerATT-0087
A conference lanyard badge card with strap, portrait, access tag, and barcode that sways on hover.
The import and the props worth knowing about, in one place.
import { Card23 } from "@/components/beste/component/card23";
// The badge sways gently from its clip on hover.
<Card23
src="/team/deniz.jpg"
name="Deniz Arslan"
role="Creative Director"
company="Beste Conf 2027"
tag="Speaker"
code="ATT-0087" // printed under the barcode, seeds the bars
/>
<Card23
src="/team/elif.jpg"
name="Elif Kaya"
role="Engineering Lead"
tag="Crew"
tone="emerald" // strap and tag: "primary" (default) | "emerald" | "rose"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
Beste Conf 2027
Deniz Arslan
Creative Director
SpeakerATT-0087
import { Card23 } from "@/components/beste/component/card23";
<Card23
src="https://i.pravatar.cc/160?img=32"
name="Deniz Arslan"
role="Creative Director"
company="Beste Conf 2027"
tag="Speaker"
code="ATT-0087"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
src* | string | — | Portrait photo URL |
name* | string | — | Person's name |
role | string | — | Role under the name |
company | string | — | Company or event name at the top of the badge |
tag | string | — | Colored access tag (defaults to "Staff") |
code | string | — | Code under the barcode, also seeds the bar pattern |
tone | "primary" | "emerald" | "rose" | — | Lanyard and tag color |
className | string | — | Additional classes merged onto the root |
Deniz Arslan
Creative Director
Leads brand systems for venture backed startups. Previously at North & Co.
View profileA team member card with a grayscale portrait that gains color on hover while a bio drawer slides up.
Admit one
Selin Aksoy
An event ticket card with punched notches, a perforated barcode stub, and detail columns for launches and conferences.
Summer in AlacatiAug 2026An instant photo card with masking tape, serif caption, and a tilt that straightens on hover for galleries.
Identity, guidelines, and design tokens that scale across every touchpoint of your product.
A 3D flip card that rotates on hover to reveal details and a link for service and feature grids.
Ready when you are
Copy your first block in under a minute. No account needed.
A call to action card with eyebrow, title, description, and buttons for section endings and banners.
