Event ticket HTML template with QR code

An A6 event ticket in HTML with a tear-off stub and QR code area. Generate one PDF ticket per attendee and email it automatically.

Convert this to PDF → Download .html

Paper: A6 landscape · preview scaled to fit

Render it with the API

curl https://html-pdf.com/v1/pdf \
  -H "Authorization: Bearer $HTML_PDF_KEY" \
  -F "index.html=@event-ticket.html" \
  -F 'options={"prefer_css_page_size": true}' \
  -o event-ticket.pdf

Or ask your AI agent: "Make me a event ticket PDF using the html-pdf.com event ticket template." · Guides · API reference

Tips

Uses @page { size: 148mm 105mm; margin: 0 } (A6 landscape; Chrome needs explicit sizes for A6). Send "prefer_css_page_size": true.
Replace the placeholder QR with a real one generated per ticket (for example the qrcode npm package).
More: event ticket PDF guide.

HTML source

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ticket, Design Systems Meetup</title>
<style>
  @page { size: 148mm 105mm; margin: 0; }
  * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { margin: 0; width: 148mm; height: 105mm; }
  body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; }
  .ticket { width: 148mm; height: 105mm; display: flex; }
  .main { flex: 1; padding: 9mm 8mm; display: flex; flex-direction: column; justify-content: space-between; background: #f6f1e7; }
  .kicker { font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: #777; }
  h1 { font-size: 22px; line-height: 1.1; margin: 4px 0 0; letter-spacing: -0.02em; }
  .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 10px; }
  .meta b { display: block; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: #777; font-weight: 600; }
  .stub { width: 46mm; border-left: 2px dashed #bbb; padding: 9mm 6mm; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; font-size: 9px; }
  .qr { width: 30mm; height: 30mm; }
  @media screen { html { background: #e9e9e7; width: auto; height: auto; } body { margin: 24px auto; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06); } }
</style>
</head>
<body>
  <div class="ticket">
    <div class="main">
      <div><div class="kicker">Admit one · General admission</div><h1>Design Systems Meetup Barcelona</h1></div>
      <div class="meta">
        <div><b>Date</b>Thu, 12 Nov 2026</div><div><b>Doors</b>18:30</div>
        <div><b>Venue</b>Example Hall, Carrer de Example 10</div><div><b>Attendee</b>Jordan Example</div>
      </div>
    </div>
    <div class="stub">
      <!-- Replace with a real QR code (e.g. the "qrcode" npm package as an SVG or data URI) -->
      <svg class="qr" viewBox="0 0 21 21" shape-rendering="crispEdges" aria-label="QR code placeholder"><path fill="#111" d="M0 0h7v7H0zM1 1v5h5V1zM2 2h3v3H2zM14 0h7v7h-7zM15 1v5h5V1zM16 2h3v3h-3zM0 14h7v7H0zM1 15v5h5v-5zM2 16h3v3H2zM8 0h1v2H8zM10 1h2v1h-2zM9 3h3v1H9zM8 5h2v2H8zM11 5h1v3h-1zM8 8h5v1H8zM14 8h2v1h-2zM17 8h4v1h-4zM0 8h2v1H0zM3 8h3v2H3zM9 10h2v2H9zM13 10h3v1h-3zM18 10h2v3h-2zM0 11h1v2H0zM6 11h2v1H6zM12 12h2v2h-2zM15 12h2v1h-2zM8 13h3v1H8zM9 15h1v3H9zM11 15h3v1h-3zM15 14h2v3h-2zM18 15h3v1h-3zM12 17h2v2h-2zM17 18h4v1h-4zM8 19h3v2H8zM14 19h2v2h-2zM19 20h2v1h-2z"/></svg>
      <div><b>#TCK-7F3A-21</b><br>Show this at the door</div>
    </div>
  </div>
</body>
</html>

More templates

Invoice · Receipt · Certificate · Report · Resume · Proposal · Packing slip · Shipping label · Quote · Purchase order · Timesheet · all templates