thirds.ai
Sign inCreate a template
Menu

The HTML behind it

Letterhead letter 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 white letter with a logo and address block at the top, three paragraphs, and a signature line
letterhead-letter/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: 794px 1123px; margin: 0; } body { font-family: Georgia, 'Times New Roman', serif; } </style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="pdf" data-thirds-page="p1" data-thirds-name="Page 1" style="width:794px;height:1123px;background:#ffffff">
<img data-thirds="image" data-thirds-id="logo" data-thirds-name="Logo" style="left:56px;top:50px;width:56px;height:56px;object-fit:contain;object-position:50% 50%;" src="{{ logo | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iMzIiIGZpbGw9IiMxYzE5MTciLz48cGF0aCBmaWxsPSIjZmRlNjhhIiBkPSJNNDYgMTRjLTE0IDItMjYgMTItMzAgMzBsLTQgOCA4LTRjMTgtNCAyOC0xNiAzMC0zMHpNMjQgNDBsMTYtMTYiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMxYzE5MTciIHN0cm9rZS13aWR0aD0iMyIgZD0iTTIyIDQyIDQwIDI0Ii8+PC9zdmc+Cg==') }}" alt="Company logo">
<div data-thirds="text" data-thirds-id="company-name" data-thirds-name="Company name" style="left:124px;top:56px;width:400px;height:30px;font-size:22px;color:#1c1917;font-weight:700;line-height:1.2;font-family:Arial,Helvetica,sans-serif;">{{ company_name }}</div>
<div data-thirds="text" data-thirds-id="company-tagline" data-thirds-name="Company tagline" style="left:124px;top:84px;width:400px;height:20px;font-size:11px;color:#78716c;font-weight:400;line-height:1.2;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;text-transform:uppercase;">{{ company_tagline }}</div>
<div data-thirds="text" data-thirds-id="company-address" data-thirds-name="Company address" style="left:480px;top:52px;width:258px;height:60px;font-size:11px;color:#57534e;font-weight:400;line-height:1.5;font-family:Arial,Helvetica,sans-serif;text-align:right;">{{ company_address }}<br>{{ company_phone }}<br>{{ company_email }}</div>
<div data-thirds="box" data-thirds-id="header-rule" data-thirds-name="Header rule" style="left:56px;top:126px;width:682px;height:4px;background:#1c1917"></div>
<div data-thirds="box" data-thirds-id="header-accent" data-thirds-name="Header accent" style="left:56px;top:126px;width:120px;height:4px;background:#fde68a"></div>
<div data-thirds="text" data-thirds-id="date" data-thirds-name="Date" style="left:56px;top:170px;width:300px;height:24px;font-size:14px;color:#1c1917;font-weight:400;line-height:1.2;">{{ date|date }}</div>
<div data-thirds="text" data-thirds-id="recipient" data-thirds-name="Recipient" style="left:56px;top:214px;width:360px;height:90px;font-size:14px;color:#1c1917;font-weight:400;line-height:1.5;">{{ recipient_name }}<br>{{ recipient_title }}<br>{{ recipient_address }}</div>
<div data-thirds="text" data-thirds-id="subject" data-thirds-name="Subject" style="left:56px;top:330px;width:682px;height:30px;font-size:16px;color:#1c1917;font-weight:700;line-height:1.2;">{{ subject }}</div>
<div data-thirds="text" data-thirds-id="greeting" data-thirds-name="Greeting" style="left:56px;top:380px;width:682px;height:26px;font-size:14px;color:#1c1917;font-weight:400;line-height:1.2;">{{ greeting }}</div>
<div data-thirds="text" data-thirds-id="paragraph-1" data-thirds-name="Paragraph 1" style="left:56px;top:416px;width:682px;height:110px;font-size:14px;color:#1c1917;font-weight:400;line-height:1.6;">{{ paragraph_1 }}</div>
<div data-thirds="text" data-thirds-id="paragraph-2" data-thirds-name="Paragraph 2" style="left:56px;top:536px;width:682px;height:110px;font-size:14px;color:#1c1917;font-weight:400;line-height:1.6;">{{ paragraph_2 }}</div>
<div data-thirds="text" data-thirds-id="paragraph-3" data-thirds-name="Paragraph 3" style="left:56px;top:656px;width:682px;height:90px;font-size:14px;color:#1c1917;font-weight:400;line-height:1.6;">{{ paragraph_3 }}</div>
<div data-thirds="text" data-thirds-id="closing" data-thirds-name="Closing" style="left:56px;top:780px;width:300px;height:26px;font-size:14px;color:#1c1917;font-weight:400;line-height:1.2;">{{ closing }}</div>
<div data-thirds="box" data-thirds-id="signature-line" data-thirds-name="Signature line" style="left:56px;top:870px;width:260px;height:1px;background:#1c1917"></div>
<div data-thirds="text" data-thirds-id="signer-name" data-thirds-name="Signer name" style="left:56px;top:882px;width:300px;height:24px;font-size:14px;color:#1c1917;font-weight:700;line-height:1.2;">{{ signer_name }}</div>
<div data-thirds="text" data-thirds-id="signer-title" data-thirds-name="Signer title" style="left:56px;top:906px;width:300px;height:22px;font-size:12px;color:#57534e;font-weight:400;line-height:1.2;font-family:Arial,Helvetica,sans-serif;">{{ signer_title }}</div>
<div data-thirds="box" data-thirds-id="footer-rule" data-thirds-name="Footer rule" style="left:56px;top:1050px;width:682px;height:1px;background:#d6d3d1"></div>
<div data-thirds="text" data-thirds-id="footer" data-thirds-name="Footer" style="left:56px;top:1064px;width:682px;height:20px;font-size:10px;color:#78716c;font-weight:400;line-height:1.2;font-family:Arial,Helvetica,sans-serif;text-align:center;">{{ footer }}</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
{
  "company_name": "Quill & Co.",
  "company_tagline": "Writing and editing for business",
  "company_address": "8 Ink Lane, Dunedin",
  "company_phone": "+64 3 555 0142",
  "company_email": "office@quill.example",
  "date": "2026-09-06",
  "recipient_name": "Ms Priya Raman",
  "recipient_title": "Finance lead, Harbour Kitchen Supply",
  "recipient_address": "40 Wharf Lane, Wellington",
  "subject": "Our proposal for the 2027 product catalogue",
  "greeting": "Dear Ms Raman,",
  "paragraph_1": "Thank you for meeting us last week. We enjoyed hearing about the plans for the 2027 catalogue, and we are pleased to send our proposal for the writing and editing work.",
  "paragraph_2": "We will write all 120 product descriptions, edit the buyer guide, and proofread the final layout. Our team can begin on 1 October and deliver the final text by 20 November. The full price is set out in the attached quote.",
  "paragraph_3": "Please let us know if you would like any changes. We are happy to talk through the plan on a call at a time that suits you.",
  "closing": "Kind regards,",
  "signer_name": "Hugo Whitfield",
  "signer_title": "Director, Quill & Co.",
  "footer": "Quill & Co. Ltd is registered in New Zealand. Company number 5590 112."
}