The HTML behind it
Gift voucher 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, Helvetica, sans-serif; } </style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="pdf" data-thirds-page="p1" data-thirds-name="Page 1" style="width:794px;height:1123px;background:#ffffff">
<div data-thirds="box" data-thirds-id="card" data-thirds-name="Card" style="left:56px;top:120px;width:682px;height:420px;background:#831843;border-radius:24px"></div>
<div data-thirds="box" data-thirds-id="card-accent" data-thirds-name="Card accent" style="left:56px;top:120px;width:240px;height:420px;background:#f9a8d4;border-radius:24px 0 0 24px"></div>
<img data-thirds="image" data-thirds-id="logo" data-thirds-name="Logo" style="left:116px;top:180px;width:120px;height:120px;object-fit:contain;object-position:50% 50%;" src="{{ logo | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iMTIiIGZpbGw9IiNmOWE4ZDQiLz48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIxNCIgZmlsbD0iIzgzMTg0MyIvPjxjaXJjbGUgY3g9IjMyIiBjeT0iMzIiIHI9IjIyIiBmaWxsPSJub25lIiBzdHJva2U9IiM4MzE4NDMiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWRhc2hhcnJheT0iNiA2Ii8+PC9zdmc+Cg==') }}" alt="Brand logo">
<div data-thirds="text" data-thirds-id="brand" data-thirds-name="Brand" style="left:76px;top:330px;width:200px;height:60px;font-size:20px;color:#831843;font-weight:800;line-height:1.2;text-align:center;" data-thirds-fit="shrink" data-thirds-min-font="14" data-thirds-max-font="20">{{ brand }}</div>
<div data-thirds="text" data-thirds-id="voucher-label" data-thirds-name="Voucher label" style="left:336px;top:170px;width:370px;height:24px;font-size:13px;color:#fbcfe8;font-weight:700;line-height:1.2;letter-spacing:2px;text-transform:uppercase;">{{ voucher_label }}</div>
<div data-thirds="text" data-thirds-id="value" data-thirds-name="Value" style="left:336px;top:200px;width:370px;height:130px;font-size:104px;color:#ffffff;font-weight:800;line-height:1.0;letter-spacing:-4px;" data-thirds-fit="shrink" data-thirds-min-font="48" data-thirds-max-font="104">{{ value }}</div>
<div data-thirds="text" data-thirds-id="value-note" data-thirds-name="Value note" style="left:336px;top:336px;width:370px;height:30px;font-size:15px;color:#fbcfe8;font-weight:400;line-height:1.2;">{{ value_note }}</div>
<div data-thirds="text" data-thirds-id="code-label" data-thirds-name="Code label" style="left:336px;top:400px;width:370px;height:20px;font-size:11px;color:#fbcfe8;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">Voucher code</div>
<div data-thirds="box" data-thirds-id="code-box" data-thirds-name="Code box" style="left:336px;top:424px;width:370px;height:54px;background:#ffffff;border-radius:10px"></div>
<div data-thirds="text" data-thirds-id="code" data-thirds-name="Code" style="left:336px;top:437px;width:370px;height:30px;font-size:24px;color:#831843;font-weight:800;line-height:1.1;text-align:center;letter-spacing:5px;font-family:'Courier New',Courier,monospace;">{{ code }}</div>
<div data-thirds="text" data-thirds-id="expiry" data-thirds-name="Expiry" style="left:336px;top:496px;width:370px;height:24px;font-size:13px;color:#ffffff;font-weight:700;line-height:1.2;">Use by {{ expires_on|date }}</div>
<div data-thirds="text" data-thirds-id="to-label" data-thirds-name="To label" style="left:56px;top:600px;width:300px;height:20px;font-size:11px;color:#575f6d;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">To</div>
<div data-thirds="text" data-thirds-id="recipient" data-thirds-name="Recipient" style="left:56px;top:624px;width:320px;height:30px;font-size:20px;color:#0b0b0b;font-weight:700;line-height:1.2;">{{ recipient_name }}</div>
<div data-thirds="text" data-thirds-id="from-label" data-thirds-name="From label" style="left:416px;top:600px;width:300px;height:20px;font-size:11px;color:#575f6d;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">From</div>
<div data-thirds="text" data-thirds-id="sender" data-thirds-name="Sender" style="left:416px;top:624px;width:322px;height:30px;font-size:20px;color:#0b0b0b;font-weight:700;line-height:1.2;">{{ sender_name }}</div>
<div data-thirds="text" data-thirds-id="message" data-thirds-name="Message" style="left:56px;top:680px;width:682px;height:80px;font-size:15px;color:#3b4252;font-weight:400;line-height:1.5;">{{ message }}</div>
<div data-thirds="box" data-thirds-id="terms-rule" data-thirds-name="Terms rule" style="left:56px;top:800px;width:682px;height:1px;background:#dde1e8"></div>
<div data-thirds="text" data-thirds-id="terms-label" data-thirds-name="Terms label" style="left:56px;top:816px;width:300px;height:20px;font-size:11px;color:#575f6d;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">How to use it</div>
<div data-thirds="text" data-thirds-id="terms" data-thirds-name="Terms" style="left:56px;top:840px;width:682px;height:80px;font-size:12px;color:#575f6d;font-weight:400;line-height:1.5;">{{ terms }}</div>
<div data-thirds="text" data-thirds-id="footer" data-thirds-name="Footer" style="left:56px;top:1064px;width:682px;height:20px;font-size:11px;color:#575f6d;font-weight:400;line-height:1.2;">{{ footer }}</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": "Lumen Skincare",
"voucher_label": "Gift voucher",
"value": "$75",
"value_note": "To spend on anything in the Lumen store or online",
"code": "LUM-4K8P-2Q",
"expires_on": "2027-09-06",
"recipient_name": "Mia Thornton",
"sender_name": "Ben Thornton",
"message": "Happy birthday, Mia. Pick something that makes your mornings a little brighter.",
"terms": "Show this voucher in store or enter the code at checkout online. Use it in one or more visits before the use-by date. It cannot be exchanged for cash.",
"footer": "Lumen Skincare Ltd, 22 Bright Street, Christchurch. Questions: help@lumen.example"
}