shadcn.io is not affiliated with official shadcn/ui
Ticket Stub Event Blog Block for Vue
Event announcements as ticket stubs: a date tile, a perforated edge, the title, the place, a seats bar and a Register link.
Installation
Overview
An events list for Vue with Ark UI, written for Hatchmark Meetups, a print-and-type community. A start-aligned header sits over four stubs in two columns, each framed by its own overshooting lines. A stub has a date tile (the weekday, then the month over the day) at the start, a perforation drawn with a dotted line and two punched notches, then the title, the time and place, a seats bar ("38 of 60 seats") and a Register link. A full evening offers "Join the waitlist" instead. The seats still free are worked out from the typed capacity. On a phone the tile sits on top and the perforation runs across. It's built from Progress, Button and Guides. For meetups, workshops and any blog that announces events. The events are example data and Register goes nowhere.
FAQ
How do I change the events?
Edit EVENTS at the top of the file: title, date (ISO), the weekday, month and day shown on the tile, time, place, taken, capacity and href. A stub is full when taken reaches capacity, and its text and link change on their own.
How is the perforation drawn?
It is a one-pixel box with a repeating gradient for the dots and two small circles, filled with the page background, centred on the stub's frame so they read as punched notches. It runs down on wider screens and across on phones. It is decoration, hidden from assistive technology.
Is the seats bar read out?
The text "38 of 60 seats" is the accessible figure; the bar is a visual copy and hidden from assistive technology. A full event reads "Full, 60 of 60 seats".