ticket-stub-ui

name	ticket-stub-ui
description	Use when designing redeemable items, coupons, or event-style components. Ticket-stub UI evokes physical tickets — perforated edges, dotted line, branded.

Ticket-Stub UI

Ticket-stub UI = digital tickets with perforated edges (CSS pattern), dotted tear line, two sections (stub + tearaway). For: coupons, gift cards, event passes.

Ticket-stub anatomy

1. Top edge: scalloped or perforated
2. Main body: full-color, brand accent
3. Tearaway stub: separated by dotted line
4. Bottom edge: matching top, perforated
5. Punch holes (optional): along edges
6. Numbering: 'No. 0001' style serial number

CSS for perforated edges

.ticket-stub {
  background: var(--accent);
  position: relative;
  padding: 20px 24px;
  border-radius: 8px;
}
.ticket-stub::before,
.ticket-stub::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--cream);
  border-radius: 50%;
  left: 30%;
}
.ticket-stub::before { top: -8px; }
.ticket-stub::after { bottom: -8px; }

For true perforated effect: SVG with scallop pattern.

Use cases in CardPrepAI

1. Founder member ticket
2. Beta access codes
3. Submission credits redemption
4. Event passes (Whatnot live event)
5. Gift cards

Where this fits in the X3 empire

Used for CardPrepAI founder-tier badges and redeemable items.