Event Ticket Card
An event ticket card with punched notches, a perforated barcode stub, and detail columns for launches and conferences.
Usage
The import and the props worth knowing about, in one place.
import { Card11 } from "@/components/beste/component/card11";
<Card11
eyebrow="Admit one"
event="Beste Conf 2027"
holder="Selin Aksoy"
details={[
{ label: "Date", value: "Mar 14" },
{ label: "Seat", value: "A12" },
{ label: "Gate", value: "03" },
]}
code="BST-0421" // printed on the stub, seeds the barcode
/>
<Card11
event="Launch party"
details={[{ label: "When", value: "Fri 21:00" }]}
tone="neutral" // "dark" (default) | "primary" | "neutral"
/>Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
Admit one
Beste Conf 2027
Selin Aksoy
- Date
- Mar 14
- Seat
- A12
- Gate
- 03
import { Card11 } from "@/components/beste/component/card11";
<Card11
eyebrow="Admit one"
event="Beste Conf 2027"
holder="Selin Aksoy"
details={[{"label":"Date","value":"Mar 14"},{"label":"Seat","value":"A12"},{"label":"Gate","value":"03"}]}
code="BST-0421"
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | — | Monospace eyebrow (e.g. "Admit one") |
event* | string | — | Event name |
holder | string | — | Ticket holder name |
details | Card11Detail[] | — | Detail columns (e.g. date, seat, gate) |
code | string | — | Code printed on the stub, also seeds the barcode |
tone | "dark" | "primary" | "neutral" | — | Surface tone |
className | string | — | Additional classes merged onto the root |
More Card components
View all CardCustomer satisfaction
vs last quarter
Stat Card
A minimal stat card with a bold value, label, and optional trend delta for metrics rows.
Beste Conf 2027
Deniz Arslan
Creative Director
SpeakerATT-0087
Lanyard Badge Card
A conference lanyard badge card with strap, portrait, access tag, and barcode that sways on hover.
Ship in minutes
Copy a block, wire up your content, and deploy. No boilerplate, no configuration, no lock in.
Learn moreSpotlight Feature Card
A feature card with an icon tile and a cursor tracking spotlight for landing page feature grids.
Join the beta program
We are opening a short testing window for the new builder. Help shape it before launch.
Only 25 seats
Applications close Jul 18.
Promo Card
A dismissible promo card with image, deadline line, and apply button for programs and offers.
Pro blocks drop monthly
A new themed set of sections lands every month, with free updates forever.
Learn moreGradient Beam Card
A featured callout card wrapped in an orbiting gradient border beam for highlights and announcements.
