thirds.ai
Sign inCreate a template
Menu

The HTML behind it

Testimonial 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 navy portrait ad with a large white quote, a row of five gold stars, and a customer name
testimonial-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: Georgia, 'Times New Roman', 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:#0b1d3a">
<div data-thirds="box" data-thirds-id="accent-bar" data-thirds-name="Accent bar" style="left:0px;top:0px;width:1080px;height:18px;background:#19c37d"></div>
<div data-thirds="text" data-thirds-id="quote-mark" data-thirds-name="Quote mark" style="left:70px;top:60px;width:200px;height:300px;font-size:260px;color:#19c37d;font-weight:700;line-height:1.0;" data-thirds-fit="shrink" data-thirds-min-font="100" data-thirds-max-font="260">“</div>
<div data-thirds="text" data-thirds-id="quote" data-thirds-name="Quote" style="left:80px;top:300px;width:920px;height:560px;font-size:62px;color:#ffffff;font-weight:700;line-height:1.18;letter-spacing:-1px;" data-thirds-fit="shrink" data-thirds-min-font="30" data-thirds-max-font="62">{{ quote }}</div>
<img data-thirds="image" data-thirds-id="star-row" data-thirds-name="Star row" style="left:80px;top:900px;width:330px;height:62px;object-fit:contain;object-position:50% 50%;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNDAgNjQiPjxnIGZpbGw9IiNmNWI0MDAiPjxwYXRoIGQ9Im0zMiA0IDggMTggMjAgMi0xNSAxMyA1IDIwLTE4LTExLTE4IDExIDUtMjBMNCAyNGwyMC0yeiIvPjxwYXRoIGQ9Im0xMDEgNCA4IDE4IDIwIDItMTUgMTMgNSAyMC0xOC0xMS0xOCAxMSA1LTIwLTE1LTEzIDIwLTJ6Ii8+PHBhdGggZD0ibTE3MCA0IDggMTggMjAgMi0xNSAxMyA1IDIwLTE4LTExLTE4IDExIDUtMjAtMTUtMTMgMjAtMnoiLz48cGF0aCBkPSJtMjM5IDQgOCAxOCAyMCAyLTE1IDEzIDUgMjAtMTgtMTEtMTggMTEgNS0yMC0xNS0xMyAyMC0yeiIvPjxwYXRoIGQ9Im0zMDggNCA4IDE4IDIwIDItMTUgMTMgNSAyMC0xOC0xMS0xOCAxMSA1LTIwLTE1LTEzIDIwLTJ6Ii8+PC9nPjwvc3ZnPgo=" alt="Five stars">
<div data-thirds="text" data-thirds-id="customer-name" data-thirds-name="Customer name" style="left:80px;top:1000px;width:900px;height:46px;font-size:36px;color:#ffffff;font-weight:700;line-height:1.2;">{{ customer_name }}</div>
<div data-thirds="text" data-thirds-id="customer-role" data-thirds-name="Customer role" style="left:80px;top:1050px;width:900px;height:40px;font-size:26px;color:#9fb8c9;font-weight:400;line-height:1.2;">{{ customer_role }}</div>
<div data-thirds="box" data-thirds-id="footer-rule" data-thirds-name="Footer rule" style="left:80px;top:1170px;width:920px;height:2px;background:#1f3a5a"></div>
<img data-thirds="image" data-thirds-id="brand-logo" data-thirds-name="Brand logo" style="left:80px;top:1210px;width:72px;height:72px;object-fit:contain;object-position:50% 50%;" src="{{ logo | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iMTQiIGZpbGw9IiMwZTdjN2IiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNkOWZmZjUiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMTAgMjZjNi02IDEyLTYgMTggMHMxMiA2IDE4IDAgOC00IDgtNE0xMCA0MmM2LTYgMTItNiAxOCAwczEyIDYgMTggMCA4LTQgOC00Ii8+PC9zdmc+Cg==') }}" alt="Brand logo">
<div data-thirds="text" data-thirds-id="brand" data-thirds-name="Brand" style="left:170px;top:1232px;width:700px;height:36px;font-size:26px;color:#ffffff;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ 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.

Sample data
{
  "brand": "Tidal Software",
  "quote": "We closed our books in two days instead of two weeks. The team asks how we ever worked without it.",
  "customer_name": "Priya Raman",
  "customer_role": "Finance lead, Harbour Kitchen Supply"
}