| 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
- Top edge: scalloped or perforated
- Main body: full-color, brand accent
- Tearaway stub: separated by dotted line
- Bottom edge: matching top, perforated
- Punch holes (optional): along edges
- 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
- Founder member ticket
- Beta access codes
- Submission credits redemption
- Event passes (Whatnot live event)
- Gift cards
Where this fits in the X3 empire
Used for CardPrepAI founder-tier badges and redeemable items.
