12 OCT · MADRID
Design nights
Una conversación sobre ideas, producto y cultura visual.
HTML + CSSCards
Event ticket card
A ticket-shaped card with a perforated stub that pulls slightly away when you hover it.
Settings
16px
1x
Code
<article class="uv-cticket"><div><small>12 OCT · MADRID</small><h3>Design nights</h3><p>A conversation about ideas, product, and visual culture.</p></div><aside><b>20:30</b><span>Gate 04</span><i>⌁</i></aside></article>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
Where to use it
When a plain card feels too generic for an event, a ticket says it at a glance. Use it for the confirmation page of a design talk or the “My tickets” screen of a festival app. This ticket card in HTML and CSS has side notches, a dashed tear line and room for the time and the gate.
The side notches take the page background color, so place the card on a flat background, not over a photo or a gradient. Keep the stub for two short facts at most, like time and door; anything longer wraps and breaks the ticket look.