thirds.ai
Sign inCreate a template
Menu

The HTML behind it

Hero product 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.

Sign in to copyTry it
A cream and green square ad with a coffee bag, a large headline, an orange price tag, and a button
hero-product-ad/template.html
<!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: 1080px 1080px; 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:1080px;height:1080px;background:#f4efe6">
<div data-thirds="box" data-thirds-id="photo-panel" data-thirds-name="Photo panel" style="left:540px;top:0px;width:540px;height:1080px;background:#123524"></div>
<img data-thirds="image" data-thirds-id="product-image" data-thirds-name="Product image" style="left:600px;top:200px;width:420px;height:546px;object-fit:contain;object-position:50% 50%;" src="{{ product_image | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNTIwIj48ZWxsaXBzZSBjeD0iMjAwIiBjeT0iNTAwIiByeD0iMTUwIiByeT0iMTQiIGZpbGw9IiMwMDAiIG9wYWNpdHk9Ii4xNSIvPjxwYXRoIGZpbGw9IiMxMjM1MjQiIGQ9Ik03MCA5MGgyNjBjMTQgMCAyNiAxMiAyNiAyNnYzNTJjMCAxNC0xMiAyNi0yNiAyNkg3MGMtMTQgMC0yNi0xMi0yNi0yNlYxMTZjMC0xNCAxMi0yNiAyNi0yNnoiLz48cGF0aCBmaWxsPSIjMGQyODFiIiBkPSJNNDQgMTE2YzAtMTQgMTItMjYgMjYtMjZoMjYwYzE0IDAgMjYgMTIgMjYgMjZ2MzBINDR6Ii8+PHJlY3QgeD0iNDQiIHk9IjE0NiIgd2lkdGg9IjMxMiIgaGVpZ2h0PSIxOCIgZmlsbD0iI2ZmN2ExYSIvPjxyZWN0IHg9IjkwIiB5PSIyMjAiIHdpZHRoPSIyMjAiIGhlaWdodD0iMjAwIiByeD0iMTgiIGZpbGw9IiNmNGVmZTYiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIyOTAiIHI9IjM4IiBmaWxsPSIjZmY3YTFhIi8+PHBhdGggZmlsbD0iI2ZmZjRlNiIgZD0iTTIwMCAyNjJjNiAxMiAxOCAxOCAxOCAzMmExOCAxOCAwIDAgMS0zNiAwYzAtNyA0LTExIDctMTQgMCA2IDMgOSA2IDkgNCAwIDUtOSA1LTI3eiIvPjxyZWN0IHg9IjEyOCIgeT0iMzUwIiB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjEyIiByeD0iNiIgZmlsbD0iIzEyMzUyNCIvPjxyZWN0IHg9IjE1MCIgeT0iMzcyIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwIiByeD0iNSIgZmlsbD0iIzEyMzUyNCIgb3BhY2l0eT0iLjUiLz48cmVjdCB4PSIxMjgiIHk9IjM5MiIgd2lkdGg9IjE0NCIgaGVpZ2h0PSIxMCIgcng9IjUiIGZpbGw9IiMxMjM1MjQiIG9wYWNpdHk9Ii4zIi8+PHBhdGggZmlsbD0iI2ZmN2ExYSIgZD0iTTQ0IDQ0MGgzMTJ2MTRINDR6Ii8+PC9zdmc+Cg==') }}" alt="Product image">
<img data-thirds="image" data-thirds-id="brand-logo" data-thirds-name="Brand logo" style="left:60px;top:60px;width:72px;height:72px;object-fit:contain;object-position:50% 50%;" src="{{ logo | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzAiIGZpbGw9IiNmZjdhMWEiLz48cGF0aCBmaWxsPSIjZmZmNGU2IiBkPSJNMzIgMTJjNCA4IDEyIDEyIDEyIDIyYTEyIDEyIDAgMCAxLTI0IDBjMC01IDMtOCA1LTEwIDAgNCAyIDYgNCA2IDMgMCAzLTYgMy0xOHoiLz48L3N2Zz4K') }}" alt="Brand logo">
<div data-thirds="text" data-thirds-id="brand" data-thirds-name="Brand" style="left:148px;top:76px;width:360px;height:40px;font-size:26px;color:#123524;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ brand }}</div>
<div data-thirds="text" data-thirds-id="headline" data-thirds-name="Headline" style="left:60px;top:250px;width:440px;height:330px;font-size:92px;color:#123524;font-weight:800;line-height:1.0;letter-spacing:-3px;" data-thirds-fit="shrink" data-thirds-min-font="40" data-thirds-max-font="92">{{ headline }}</div>
<div data-thirds="text" data-thirds-id="supporting-line" data-thirds-name="Supporting line" style="left:60px;top:610px;width:430px;height:120px;font-size:30px;color:#3f5a4b;font-weight:400;line-height:1.3;">{{ supporting_line }}</div>
<div data-thirds="box" data-thirds-id="price-tag" data-thirds-name="Price tag" style="left:60px;top:790px;width:300px;height:120px;background:#ff7a1a;border-radius:16px"></div>
<div data-thirds="text" data-thirds-id="price-label" data-thirds-name="Price label" style="left:84px;top:806px;width:250px;height:24px;font-size:16px;color:#fff4e6;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ price_label }}</div>
<div data-thirds="text" data-thirds-id="price" data-thirds-name="Price" style="left:84px;top:834px;width:260px;height:64px;font-size:52px;color:#ffffff;font-weight:800;line-height:1.0;letter-spacing:-1px;" data-thirds-fit="shrink" data-thirds-min-font="24" data-thirds-max-font="52">{{ price }}</div>
<div data-thirds="box" data-thirds-id="action-button" data-thirds-name="Action button" style="left:60px;top:950px;width:440px;height:76px;background:#123524;border-radius:38px"></div>
<div data-thirds="text" data-thirds-id="action" data-thirds-name="Action" style="left:60px;top:972px;width:440px;height:36px;font-size:26px;color:#ffffff;font-weight:700;line-height:1.2;text-align:center;">{{ 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.

Sample data
{
  "brand": "Ember Coffee Co.",
  "headline": "Wake up to a better cup.",
  "supporting_line": "Small-batch beans roasted this week and shipped to your door in two days.",
  "price_label": "Bag of 500 g",
  "price": "$18",
  "action": "Order your first bag"
}