The HTML behind it

Quote card 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.

An orange square card with a large white serif quote and an attribution line

<!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: 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:1080px;background:#ff5a1f">
<div data-thirds="text" data-thirds-id="quote-mark" data-thirds-name="Quote mark" style="left:70px;top:10px;width:200px;height:330px;font-size:300px;color:#ffd9c7;font-weight:700;line-height:1.0;" data-thirds-fit="shrink" data-thirds-min-font="100" data-thirds-max-font="300">“</div>
<div data-thirds="text" data-thirds-id="quote" data-thirds-name="Quote" style="left:80px;top:250px;width:920px;height:560px;font-size:84px;color:#ffffff;font-weight:700;line-height:1.12;letter-spacing:-2px;" data-thirds-fit="shrink" data-thirds-min-font="36" data-thirds-max-font="84">{{ quote }}</div>
<div data-thirds="box" data-thirds-id="attribution-rule" data-thirds-name="Attribution rule" style="left:80px;top:860px;width:120px;height:6px;background:#ffffff"></div>
<div data-thirds="text" data-thirds-id="attribution" data-thirds-name="Attribution" style="left:80px;top:900px;width:920px;height:50px;font-size:36px;color:#ffffff;font-weight:700;line-height:1.2;">{{ attribution }}</div>
<div data-thirds="text" data-thirds-id="attribution-detail" data-thirds-name="Attribution detail" style="left:80px;top:955px;width:920px;height:40px;font-size:26px;color:#ffd9c7;font-weight:400;line-height:1.2;font-family:Arial,Helvetica,sans-serif;">{{ attribution_detail }}</div>
</div>
</body>
</html>

Sample data

The values that made the picture.

Change any of them, and the same HTML makes a new file.

{
  "quote": "The best time to plant a tree was twenty years ago. The second best time is today.",
  "attribution": "Old proverb",
  "attribution_detail": "Shared by Summit Outdoor"
}