Event Ticket Template HTML and JSON

This walkthrough is based on the Event Ticket template in the Gallery.

Ticket layouts are sensitive to spacing, so this pattern keeps data blocks explicit: event info on the left, ticket metadata on the stub.

Step 1 - Event ticket HTML layout

HTML

<style>
  body {
    font-family: 'Segoe UI', sans-serif;
    padding: 32px;
    background: #fff;
  }

  .ticket {
    display: flex;
    max-width: 620px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  }

  .ticket-main {
    flex: 1;
    padding: 28px;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
  }

  .ticket-stub {
    width: 160px;
    padding: 24px 16px;
    text-align: center;
    background: #f8f7ff;
  }
</style>

<div class="ticket">
  <div class="ticket-main">
    <div>{{event_type}}</div>
    <h2>{{event_name}}</h2>
    <p>{{event_subtitle}}</p>

    <p>Date: {{date}}</p>
    <p>Time: {{time}}</p>
    <p>Venue: {{venue}}</p>
    <p>Attendee: {{attendee_name}}</p>
  </div>

  <div class="ticket-stub">
    <div>Seat</div>
    <strong>{{seat}}</strong>

    <div>Ticket #</div>
    <strong>{{ticket_number}}</strong>

    <div>Price</div>
    <strong>{{price}}</strong>
  </div>
</div>

Step 2 - JSON payload example

JSON

{
  "event_type": "Live Concert",
  "event_name": "Summer Beats 2026",
  "event_subtitle": "ft. The Midnight & Tycho",
  "date": "July 15, 2026",
  "time": "7:00 PM",
  "venue": "Amphitheater Park, LA",
  "attendee_name": "Chris Taylor",
  "seat": "A-14",
  "ticket_number": "TK-78432",
  "price": "$85.00"
}

Step 3 - Final rendered preview in page

Rendered output preview Template style preview

Preview uses the original Gallery template HTML and CSS with sample payload values.

Step 4 - Mapping checks that prevent broken tickets

Keep seat and ticket_number short and fixed-width friendly.
Format price text before payload (for example $85.00).
Ensure date and time strings are already localized as needed.

Step 5 - API render example

BASH

curl -X POST "https://api.hookpdf.com/v1/render" \
  -H "Authorization: Bearer <api_key>" \
  -H "Content-Type: application/json" \
  -d '{
    "template_id": "<event_ticket_template_id>",
    "payload": {
      "event_type": "Live Concert",
      "event_name": "Summer Beats 2026",
      "event_subtitle": "ft. The Midnight & Tycho",
      "date": "July 15, 2026",
      "time": "7:00 PM",
      "venue": "Amphitheater Park, LA",
      "attendee_name": "Chris Taylor",
      "seat": "A-14",
      "ticket_number": "TK-78432",
      "price": "$85.00"
    }
  }'

Use this template for free now

Start with this template in HookPDF and render your first PDF for free.

Use this template free

Event Ticket Template: HTML + JSON Payload