thirds.ai
Sign inCreate a template
Menu

The HTML behind it

Feature list 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 light purple portrait ad with a headline and four white cards, each with a green check mark
feature-list-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 1350px; 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:1350px;background:#efe9ff">
<img data-thirds="image" data-thirds-id="brand-logo" data-thirds-name="Brand logo" style="left:70px;top:70px;width:64px;height:64px;object-fit:contain;object-position:50% 50%;" src="{{ logo | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iMTAiIGZpbGw9IiMxZTFiNGIiLz48cGF0aCBmaWxsPSIjYzdkMmZlIiBkPSJNMTQgMTRoMTR2MzZIMTR6TTM2IDE0aDE0djM2SDM2eiIvPjxwYXRoIGZpbGw9IiMxZTFiNGIiIGQ9Ik0xOCAyMGg2djI0aC02ek00MCAyMGg2djI0aC02eiIvPjwvc3ZnPgo=') }}" alt="Brand logo">
<div data-thirds="text" data-thirds-id="brand" data-thirds-name="Brand" style="left:150px;top:86px;width:800px;height:36px;font-size:24px;color:#2d1b69;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:70px;top:190px;width:940px;height:260px;font-size:82px;color:#2d1b69;font-weight:800;line-height:1.02;letter-spacing:-3px;" data-thirds-fit="shrink" data-thirds-min-font="36" data-thirds-max-font="82">{{ headline }}</div>
<div data-thirds="box" data-thirds-id="feature-card-1" data-thirds-name="Feature card 1" style="left:70px;top:500px;width:940px;height:130px;background:#ffffff;border-radius:22px"></div>
<img data-thirds="image" data-thirds-id="feature-check-1" data-thirds-name="Feature check 1" style="left:100px;top:535px;width:60px;height:60px;object-fit:contain;object-position:50% 50%;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzAiIGZpbGw9IiMxOWMzN2QiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJtMTggMzMgMTAgMTAgMTgtMjIiLz48L3N2Zz4K" alt="Check">
<div data-thirds="text" data-thirds-id="feature-1" data-thirds-name="Feature 1" style="left:190px;top:544px;width:790px;height:50px;font-size:32px;color:#1f1147;font-weight:700;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="20" data-thirds-max-font="32">{{ feature_1 }}</div>
<div data-thirds="box" data-thirds-id="feature-card-2" data-thirds-name="Feature card 2" style="left:70px;top:650px;width:940px;height:130px;background:#ffffff;border-radius:22px"></div>
<img data-thirds="image" data-thirds-id="feature-check-2" data-thirds-name="Feature check 2" style="left:100px;top:685px;width:60px;height:60px;object-fit:contain;object-position:50% 50%;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzAiIGZpbGw9IiMxOWMzN2QiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJtMTggMzMgMTAgMTAgMTgtMjIiLz48L3N2Zz4K" alt="Check">
<div data-thirds="text" data-thirds-id="feature-2" data-thirds-name="Feature 2" style="left:190px;top:694px;width:790px;height:50px;font-size:32px;color:#1f1147;font-weight:700;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="20" data-thirds-max-font="32">{{ feature_2 }}</div>
<div data-thirds="box" data-thirds-id="feature-card-3" data-thirds-name="Feature card 3" style="left:70px;top:800px;width:940px;height:130px;background:#ffffff;border-radius:22px"></div>
<img data-thirds="image" data-thirds-id="feature-check-3" data-thirds-name="Feature check 3" style="left:100px;top:835px;width:60px;height:60px;object-fit:contain;object-position:50% 50%;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzAiIGZpbGw9IiMxOWMzN2QiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJtMTggMzMgMTAgMTAgMTgtMjIiLz48L3N2Zz4K" alt="Check">
<div data-thirds="text" data-thirds-id="feature-3" data-thirds-name="Feature 3" style="left:190px;top:844px;width:790px;height:50px;font-size:32px;color:#1f1147;font-weight:700;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="20" data-thirds-max-font="32">{{ feature_3 }}</div>
<div data-thirds="box" data-thirds-id="feature-card-4" data-thirds-name="Feature card 4" style="left:70px;top:950px;width:940px;height:130px;background:#ffffff;border-radius:22px"></div>
<img data-thirds="image" data-thirds-id="feature-check-4" data-thirds-name="Feature check 4" style="left:100px;top:985px;width:60px;height:60px;object-fit:contain;object-position:50% 50%;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzAiIGZpbGw9IiMxOWMzN2QiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJtMTggMzMgMTAgMTAgMTgtMjIiLz48L3N2Zz4K" alt="Check">
<div data-thirds="text" data-thirds-id="feature-4" data-thirds-name="Feature 4" style="left:190px;top:994px;width:790px;height:50px;font-size:32px;color:#1f1147;font-weight:700;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="20" data-thirds-max-font="32">{{ feature_4 }}</div>
<div data-thirds="box" data-thirds-id="action-button" data-thirds-name="Action button" style="left:70px;top:1150px;width:940px;height:100px;background:#2d1b69;border-radius:50px"></div>
<div data-thirds="text" data-thirds-id="action" data-thirds-name="Action" style="left:70px;top:1180px;width:940px;height:44px;font-size:32px;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": "Marlow Books",
  "headline": "Bookkeeping that does the boring part for you",
  "feature_1": "Bank feeds sort themselves every night",
  "feature_2": "Invoices go out on time, every time",
  "feature_3": "Tax totals stay ready all year",
  "feature_4": "A real person answers in under an hour",
  "action": "Start your free month"
}