The HTML behind it
Meeting agenda 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.
<!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: 794px 1123px; margin: 0; } body { font-family: Arial, sans-serif; } [data-thirds="table"] th,[data-thirds="table"] td { padding: 4px 10px; } </style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="pdf" style="width:794px;height:1123px;background:white">
<div data-thirds="text" style="left:56px;top:54px;width:600px;height:22px;font-size:12px;color:#0a46ff;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">{{ business_name }}</div>
<div data-thirds="text" style="left:56px;top:112px;width:680px;height:137px;font-size:46px;color:#0b0b0b;font-weight:700;line-height:1.25">{{ meeting }}</div>
<div data-thirds="text" style="left:56px;top:293px;width:302px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">When</div>
<div data-thirds="text" style="left:56px;top:326px;width:305px;height:65px;font-size:21px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ when }}</div>
<div data-thirds="text" style="left:418px;top:293px;width:320px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Where</div>
<div data-thirds="text" style="left:418px;top:326px;width:320px;height:65px;font-size:21px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ where }}</div>
<div data-thirds="box" style="left:56px;top:439px;width:682px;height:138px;background:#eaf0ff"></div>
<div data-thirds="text" style="left:80px;top:462px;width:634px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Our aim</div>
<div data-thirds="text" style="left:80px;top:498px;width:634px;height:55px;font-size:21px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ aim }}</div>
<div data-thirds="text" style="left:56px;top:632px;width:680px;height:41px;font-size:28px;color:#0b0b0b;font-weight:700;line-height:1.25">Agenda</div>
<table data-thirds="table" style="left:56px;top:699px;width:682px;font-size:16px;--head:#eaf0ff"><thead><tr><th>Time</th><th>Topic</th><th>Owner</th></tr></thead><tbody>{% for item in items %}<tr><td>{{ item.time }}</td><td>{{ item.topic }}</td><td>{{ item.owner }}</td></tr>{% endfor %}</tbody></table>
<div data-thirds="text" style="left:56px;top:975px;width:600px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Before the meeting</div>
<div data-thirds="text" style="left:56px;top:1006px;width:680px;height:55px;font-size:17px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ preparation }}</div>
</div>
</body>
</html>
Sample data
The values that made the picture.
Change any of them, and the same HTML makes a new file.
{
"business_name": "Northline Studio",
"meeting": "Plan the next quarter",
"when": "14 September · 10:00–11:00",
"where": "Studio room 2 + video call",
"aim": "Agree on three clear goals for the next 90 days.",
"items": [
{
"time": "10:00",
"topic": "What we learned",
"owner": "Maya"
},
{
"time": "10:15",
"topic": "Choose our goals",
"owner": "Alex"
},
{
"time": "10:45",
"topic": "Owners and next steps",
"owner": "Team"
}
],
"preparation": "Bring one win, one lesson, and one idea for the next quarter."
}