Lanyard Badge Card

About this component

A conference lanyard badge card with strap, portrait, access tag, and barcode that sways on hover.

Usage

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"
/>

Props

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

More Card components

View all Card

Admit one

Beste Conf 2027

Selin Aksoy

Date: Mar 14
Seat: A12
Gate: 03

BST-0421

Deniz Arslan

Creative Director

Leads brand systems for venture backed startups. Previously at North & Co.

View profile

Summer in AlacatiAug 2026