12 OCT · MADRID
Design-Abende
Una conversación sobre ideas, producto y cultura visual.
HTML + CSSKarten
Karte als Eventticket
Eine Karte in Ticketform, deren perforierter Abschnitt sich beim Hovern ein kleines Stück löst.
Einstellungen
16px
1x
Code
<article class="uv-cticket"><div><small>12 OCT · MADRID</small><h3>Design-Abende</h3><p>Ein Gespräch über Ideen, Produkt und visuelle Kultur.</p></div><aside><b>20:30</b><span>Gate 04</span><i>⌁</i></aside></article>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Karten
Wofür du ihn nutzen kannst
Wenn eine normale Karte für ein Event zu beliebig wirkt, sagt ein Ticket auf einen Blick, worum es geht. Nutze es für die Bestätigungsseite eines Design-Talks oder den Bereich „Meine Tickets“ in einer Festival-App. Diese Ticket-Karte in HTML und CSS hat seitliche Kerben, eine gestrichelte Abrisslinie und Platz für Uhrzeit und Eingang.
Die Kerben an den Seiten übernehmen die Hintergrundfarbe der Seite. Setz die Karte also auf einen einfarbigen Hintergrund, nicht auf ein Foto. Im Abschnitt haben höchstens zwei kurze Angaben Platz; bei mehr bricht der Text um und der Ticket-Look geht verloren.