The HTML behind it

Event promo 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 wide event image with a dark date block and blue event details

<!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 630px; margin: 0; } body { font-family: Arial, sans-serif; } [data-thirds="table"] th,[data-thirds="table"] td { padding: 12px; } </style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="image" style="width:1200px;height:630px;background:#0a46ff">
<div data-thirds="box" style="left:0px;top:0px;width:335px;height:630px;background:#0b0b0b"></div>
<div data-thirds="text" style="left:58px;top:85px;width:220px;height:22px;font-size:12px;color:white;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">{{ month }}</div>
<div data-thirds="text" style="left:50px;top:147px;width:250px;height:222px;font-size:170px;color:white;font-weight:700;line-height:1.25;letter-spacing:-7px">{{ day }}</div>
<div data-thirds="text" style="left:58px;top:441px;width:225px;height:92px;font-size:25px;color:white;font-weight:400;line-height:1.25">{{ time }}</div>
<div data-thirds="text" style="left:390px;top:63px;width:720px;height:22px;font-size:12px;color:white;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">{{ host }}</div>
<div data-thirds="text" style="left:390px;top:139px;width:750px;height:195px;font-size:63px;color:white;font-weight:700;line-height:1.25;letter-spacing:-2px">{{ title }}</div>
<div data-thirds="text" style="left:390px;top:368px;width:720px;height:116px;font-size:26px;color:white;font-weight:400;line-height:1.25">{{ description }}</div>
<div data-thirds="box" style="left:390px;top:520px;width:710px;height:64px;background:white"></div>
<div data-thirds="text" style="left:415px;top:537px;width:660px;height:33px;font-size:24px;color:#0a46ff;font-weight:700;line-height:1.25">{{ action }}</div>
</div>
</body>
</html>

Sample data

The values that made the picture.

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

{
  "month": "October",
  "day": "14",
  "time": "3:00 PM London",
  "host": "Fieldnote sessions",
  "title": "Plan a client launch in one afternoon",
  "description": "A practical workshop for small teams that want one clear story and a reusable launch kit.",
  "action": "Save your place"
}