thirds.ai
Sign inCreate a template
Menu

The HTML behind it

Job 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 yellow portrait ad with a huge role title, three bullet points, and a black apply button
job-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:#ffd60a">
<div data-thirds="text" data-thirds-id="label" data-thirds-name="Label" style="left:70px;top:70px;width:700px;height:40px;font-size:28px;color:#0b0b0b;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ label }}</div>
<img data-thirds="image" data-thirds-id="brand-logo" data-thirds-name="Brand logo" style="left:930px;top:60px;width:80px;height:80px;object-fit:contain;object-position:50% 50%;" src="{{ logo | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iOCIgZmlsbD0iI2ZmZDYwYSIvPjxwYXRoIGZpbGw9IiMwYjBiMGIiIGQ9Ik0xMCA0MCAzMiAxMmwyMiAyOEg0MmwtMTAtMTMtMTAgMTN6TTI0IDQ0aDE2djhIMjR6Ii8+PC9zdmc+Cg==') }}" alt="Brand logo">
<div data-thirds="text" data-thirds-id="role" data-thirds-name="Role" style="left:70px;top:180px;width:940px;height:320px;font-size:108px;color:#0b0b0b;font-weight:800;line-height:1.0;letter-spacing:-4px;" data-thirds-fit="shrink" data-thirds-min-font="48" data-thirds-max-font="108">{{ role }}</div>
<div data-thirds="text" data-thirds-id="company-line" data-thirds-name="Company line" style="left:70px;top:530px;width:940px;height:90px;font-size:32px;color:#0b0b0b;font-weight:400;line-height:1.3;">{{ company_line }}</div>
<div data-thirds="box" data-thirds-id="detail-rule" data-thirds-name="Detail rule" style="left:70px;top:660px;width:940px;height:6px;background:#0b0b0b"></div>
<div data-thirds="box" data-thirds-id="bullet-1" data-thirds-name="Bullet 1" style="left:70px;top:724px;width:22px;height:22px;background:#0b0b0b;border-radius:11px"></div>
<div data-thirds="text" data-thirds-id="point-1" data-thirds-name="Point 1" style="left:120px;top:710px;width:890px;height:60px;font-size:32px;color:#0b0b0b;font-weight:700;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="20" data-thirds-max-font="32">{{ point_1 }}</div>
<div data-thirds="box" data-thirds-id="bullet-2" data-thirds-name="Bullet 2" style="left:70px;top:824px;width:22px;height:22px;background:#0b0b0b;border-radius:11px"></div>
<div data-thirds="text" data-thirds-id="point-2" data-thirds-name="Point 2" style="left:120px;top:810px;width:890px;height:60px;font-size:32px;color:#0b0b0b;font-weight:700;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="20" data-thirds-max-font="32">{{ point_2 }}</div>
<div data-thirds="box" data-thirds-id="bullet-3" data-thirds-name="Bullet 3" style="left:70px;top:924px;width:22px;height:22px;background:#0b0b0b;border-radius:11px"></div>
<div data-thirds="text" data-thirds-id="point-3" data-thirds-name="Point 3" style="left:120px;top:910px;width:890px;height:60px;font-size:32px;color:#0b0b0b;font-weight:700;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="20" data-thirds-max-font="32">{{ point_3 }}</div>
<div data-thirds="box" data-thirds-id="apply-button" data-thirds-name="Apply button" style="left:70px;top:1130px;width:940px;height:110px;background:#0b0b0b;border-radius:55px"></div>
<div data-thirds="text" data-thirds-id="apply" data-thirds-name="Apply" style="left:70px;top:1164px;width:940px;height:46px;font-size:34px;color:#ffd60a;font-weight:800;line-height:1.2;text-align:center;">{{ apply }}</div>
<div data-thirds="text" data-thirds-id="apply-note" data-thirds-name="Apply note" style="left:70px;top:1270px;width:940px;height:40px;font-size:22px;color:#0b0b0b;font-weight:400;line-height:1.2;text-align:center;">{{ apply_note }}</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
{
  "label": "We are hiring",
  "role": "Bike mechanic",
  "company_line": "Kestrel Bikes builds and services trail bikes in Wellington. Join a team of eight.",
  "point_1": "Full time, four days a week",
  "point_2": "$68,000 plus a yearly bike allowance",
  "point_3": "Start in October, training paid",
  "apply": "Apply in five minutes",
  "apply_note": "Send a short note to jobs@kestrel.example"
}