The HTML behind it

Stat callout 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.

<!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:#ffffff">
<div data-thirds="box" data-thirds-id="left-band" data-thirds-name="Left band" style="left:0px;top:0px;width:24px;height:628px;background:#0a46ff"></div>
<div data-thirds="text" data-thirds-id="statistic" data-thirds-name="Statistic" style="left:80px;top:80px;width:700px;height:260px;font-size:220px;color:#0a46ff;font-weight:800;line-height:1.0;letter-spacing:-12px;" data-thirds-fit="shrink" data-thirds-min-font="80" data-thirds-max-font="220">{{ statistic }}</div>
<div data-thirds="text" data-thirds-id="claim" data-thirds-name="Claim" style="left:80px;top:360px;width:720px;height:120px;font-size:40px;color:#0b0b0b;font-weight:700;line-height:1.15;letter-spacing:-1px;" data-thirds-fit="shrink" data-thirds-min-font="22" data-thirds-max-font="40">{{ claim }}</div>
<div data-thirds="text" data-thirds-id="source-line" data-thirds-name="Source line" style="left:80px;top:520px;width:720px;height:40px;font-size:20px;color:#575f6d;font-weight:400;line-height:1.2;">{{ source_line }}</div>
<div data-thirds="box" data-thirds-id="logo-panel" data-thirds-name="Logo panel" style="left:860px;top:0px;width:340px;height:628px;background:#eaf0ff"></div>
<img data-thirds="image" data-thirds-id="brand-logo" data-thirds-name="Brand logo" style="left:950px;top:214px;width:160px;height:160px;object-fit:contain;object-position:50% 50%;" src="{{ logo | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMTIiIGZpbGw9IiMwYTQ2ZmYiLz48ZWxsaXBzZSBjeD0iMzIiIGN5PSIzMiIgcng9IjI4IiByeT0iMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzBhNDZmZiIgc3Ryb2tlLXdpZHRoPSI0IiB0cmFuc2Zvcm09InJvdGF0ZSgtMjUgMzIgMzIpIi8+PGNpcmNsZSBjeD0iNTYiIGN5PSIyMCIgcj0iNSIgZmlsbD0iI2ZmZDYwYSIvPjwvc3ZnPgo=') }}" alt="Brand logo">
<div data-thirds="text" data-thirds-id="brand" data-thirds-name="Brand" style="left:870px;top:400px;width:320px;height:40px;font-size:24px;color:#0a46ff;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;text-align:center;">{{ brand }}</div>
</div>
</body>
</html>

Sample data

The values that made the picture.

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

{
  "statistic": "63%",
  "claim": "of teams cut reporting time in half within one month",
  "source_line": "Orbit Analytics customer survey, 412 teams, August 2026",
  "brand": "Orbit Analytics"
}