The HTML behind it

Event invite ad template HTML

This is the whole template. The fields in double braces fill from your data on every render. Copy it into your account and change anything you like.

A green landscape invite with a large date on the left, the event name, and a white RSVP button

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style data-thirds="base">
html,body{margin:0}
[data-thirds="canvas"]{position:relative;overflow:hidden}
[data-thirds="canvas"] [data-thirds]{position:absolute;box-sizing:border-box;margin:0}
[data-thirds="text"]{white-space:pre-wrap;overflow-wrap:anywhere}
[data-thirds="image"]{display:block}
[data-thirds="table"]{border-collapse:collapse}
[data-thirds="table"] th,[data-thirds="table"] td{padding:4px 6px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule,#dde1e8)}
[data-thirds="table"] th{background:var(--head,transparent)}
[data-thirds="list"]{display:flex;flex-direction:column}
[data-thirds="canvas"] [data-thirds="item"]{position:relative;flex:none}
</style>
<style>@page { size: 1200px 628px; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; } </style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="image" data-thirds-page="p1" data-thirds-name="Page 1" style="width:1200px;height:628px;background:#14532d">
<div data-thirds="box" data-thirds-id="date-panel" data-thirds-name="Date panel" style="left:0px;top:0px;width:360px;height:628px;background:#bbf7d0"></div>
<div data-thirds="text" data-thirds-id="month" data-thirds-name="Month" style="left:50px;top:90px;width:260px;height:40px;font-size:26px;color:#14532d;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;text-align:center;">{{ month }}</div>
<div data-thirds="text" data-thirds-id="day" data-thirds-name="Day" style="left:30px;top:140px;width:300px;height:230px;font-size:210px;color:#14532d;font-weight:800;line-height:1.0;letter-spacing:-10px;text-align:center;">{{ day }}</div>
<div data-thirds="text" data-thirds-id="time" data-thirds-name="Time" style="left:50px;top:400px;width:260px;height:44px;font-size:30px;color:#14532d;font-weight:700;line-height:1.2;text-align:center;">{{ time }}</div>
<div data-thirds="text" data-thirds-id="place" data-thirds-name="Place" style="left:50px;top:450px;width:260px;height:90px;font-size:22px;color:#166534;font-weight:400;line-height:1.3;text-align:center;">{{ place }}</div>
<img data-thirds="image" data-thirds-id="brand-logo" data-thirds-name="Brand logo" style="left:420px;top:60px;width:56px;height:56px;object-fit:contain;object-position:50% 50%;" src="{{ logo | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTQgNTYgMjQgMTZsMTAgMTggNi04IDIwIDMweiIvPjxwYXRoIGZpbGw9IiNiYmY3ZDAiIGQ9Im0yNCAxNiA1IDEwLTUgNC01LTR6Ii8+PC9zdmc+Cg==') }}" alt="Brand logo">
<div data-thirds="text" data-thirds-id="brand" data-thirds-name="Brand" style="left:490px;top:74px;width:650px;height:36px;font-size:22px;color:#bbf7d0;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ brand }}</div>
<div data-thirds="text" data-thirds-id="event-name" data-thirds-name="Event name" style="left:420px;top:150px;width:720px;height:220px;font-size:74px;color:#ffffff;font-weight:800;line-height:1.05;letter-spacing:-2px;" data-thirds-fit="shrink" data-thirds-min-font="34" data-thirds-max-font="74">{{ event_name }}</div>
<div data-thirds="text" data-thirds-id="speaker-line" data-thirds-name="Speaker line" style="left:420px;top:400px;width:720px;height:80px;font-size:26px;color:#d1fae5;font-weight:400;line-height:1.3;">{{ speaker_line }}</div>
<div data-thirds="box" data-thirds-id="rsvp-button" data-thirds-name="RSVP button" style="left:420px;top:520px;width:380px;height:64px;background:#ffffff;border-radius:32px"></div>
<div data-thirds="text" data-thirds-id="rsvp" data-thirds-name="RSVP" style="left:420px;top:538px;width:380px;height:32px;font-size:24px;color:#14532d;font-weight:800;line-height:1.2;text-align:center;">{{ rsvp }}</div>
</div>
</body>
</html>

Sample data

The values that made the picture.

Change any of them, and the same HTML makes a new file.

{
  "brand": "Summit Outdoor",
  "event_name": "Trail Night: gear talks and a night hike",
  "month": "October",
  "day": "9",
  "time": "6:30 pm",
  "place": "Summit Store, 14 Ridge Road, Queenstown",
  "speaker_line": "With guide Tom Aldous and the Summit pack design team. Bring a head torch.",
  "rsvp": "Save my place"
}