HTML Ticket Demo

A compact event ticket with tear-off stub, generated from HTML and CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Ticket</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="ticket-container">
        <div class="ticket-main">
            <header class="ticket-header">
                <h1>PdfBroker.io Developer Conference 2026</h1>
                <p class="event-tagline">Build, Generate, Transform</p>
            </header>

            <section class="ticket-body">
                <div class="event-details">
                    <div class="detail-row">
                        <span class="detail-label">Date & Time</span>
                        <span class="detail-value">March 15, 2026 - 09:00 AM</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Venue</span>
                        <span class="detail-value">Stockholm Convention Center<br>Sollentuna, Sweden</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Ticket Holder</span>
                        <span class="detail-value">John Doe</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Access Level</span>
                        <span class="detail-value ticket-type">VIP Access</span>
                    </div>
                </div>

                <div class="ticket-codes">
                    <div class="qr-code">
                        <div class="qr-placeholder"></div>
                        <p class="code-label">Scan to Check-In</p>
                    </div>
                    <div class="barcode">
                        <div class="barcode-bars">
                            <span></span><span></span><span></span><span></span><span></span>
                            <span></span><span></span><span></span><span></span><span></span>
                            <span></span><span></span><span></span><span></span><span></span>
                            <span></span><span></span><span></span><span></span><span></span>
                        </div>
                        <p class="ticket-number">TICKET-2026-0042</p>
                    </div>
                </div>
            </section>

            <footer class="ticket-footer">
                <p>Present this ticket at the entrance. Valid for one person only.</p>
            </footer>
        </div>

        <div class="ticket-stub">
            <div class="stub-content">
                <h2>PdfBroker.io DevCon 2026</h2>
                <div class="stub-detail">
                    <strong>March 15, 2026</strong>
                    <span>09:00 AM</span>
                </div>
                <div class="stub-detail">
                    <strong>John Doe</strong>
                    <span class="stub-type">VIP Access</span>
                </div>
                <div class="stub-qr">
                    <div class="qr-placeholder-small"></div>
                </div>
                <p class="stub-number">TICKET-2026-0042</p>
            </div>
        </div>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.ticket-container {
    display: flex;
    width: 800px;
    height: 300px;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    overflow: hidden;
}

.ticket-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 2px dashed #ccc;
}

.ticket-header {
    background: linear-gradient(135deg, #6462a8 0%, #8280c8 100%);
    color: white;
    padding: 20px 24px;
    text-align: center;
}

.ticket-header h1 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.event-tagline {
    font-size: 13px;
    opacity: 0.95;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.ticket-body {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    gap: 20px;
}

.event-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #666;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 14px;
    color: #222;
    font-weight: 500;
    line-height: 1.4;
}

.ticket-type {
    color: #6462a8;
    font-weight: 700;
}

.ticket-codes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
}

.qr-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.qr-placeholder {
    width: 70px;
    height: 70px;
    background: linear-gradient(45deg, #6462a8 25%, transparent 25%, transparent 75%, #6462a8 75%, #6462a8),
                linear-gradient(45deg, #6462a8 25%, transparent 25%, transparent 75%, #6462a8 75%, #6462a8);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
    border: 2px solid #6462a8;
}

.code-label {
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
}

.barcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.barcode-bars {
    display: flex;
    gap: 2px;
    height: 40px;
    align-items: flex-end;
}

.barcode-bars span {
    width: 2px;
    background: #222;
    display: block;
}

.barcode-bars span:nth-child(odd) {
    height: 100%;
}

.barcode-bars span:nth-child(even) {
    height: 70%;
}

.barcode-bars span:nth-child(3n) {
    height: 85%;
}

.ticket-number {
    font-size: 10px;
    font-weight: 600;
    color: #444;
    letter-spacing: 0.5px;
}

.ticket-footer {
    padding: 12px 24px;
    background: #f8f8f8;
    border-top: 1px solid #e0e0e0;
}

.ticket-footer p {
    font-size: 10px;
    color: #666;
    text-align: center;
}

.ticket-stub {
    width: 200px;
    background: linear-gradient(180deg, #6462a8 0%, #7876b8 100%);
    color: white;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stub-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

.stub-content h2 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.stub-detail {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stub-detail strong {
    font-size: 13px;
    font-weight: 700;
}

.stub-detail span {
    font-size: 11px;
    opacity: 0.9;
}

.stub-type {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
    margin-top: 4px;
}

.stub-qr {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

.qr-placeholder-small {
    width: 60px;
    height: 60px;
    background: white;
    background: linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white),
                linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    border: 2px solid white;
}

.stub-number {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

Click "Run demo as PDF" or "Run demo as image" to see the result here.