The HTML behind it
Open Graph card 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.
<!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: 1200px 630px; 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:1200px;height:630px;background:#f6f7fb">
<div data-thirds="box" data-thirds-id="top-bar" data-thirds-name="Top bar" style="left:0px;top:0px;width:1200px;height:16px;background:#0a46ff"></div>
<img data-thirds="image" data-thirds-id="site-logo" data-thirds-name="Site logo" style="left:80px;top:76px;width:64px;height:64px;object-fit:contain;object-position:50% 50%;" src="{{ logo | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMTIiIGZpbGw9IiMwYTQ2ZmYiLz48ZWxsaXBzZSBjeD0iMzIiIGN5PSIzMiIgcng9IjI4IiByeT0iMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzBhNDZmZiIgc3Ryb2tlLXdpZHRoPSI0IiB0cmFuc2Zvcm09InJvdGF0ZSgtMjUgMzIgMzIpIi8+PGNpcmNsZSBjeD0iNTYiIGN5PSIyMCIgcj0iNSIgZmlsbD0iI2ZmZDYwYSIvPjwvc3ZnPgo=') }}" alt="Site logo">
<div data-thirds="text" data-thirds-id="site-name" data-thirds-name="Site name" style="left:160px;top:92px;width:900px;height:36px;font-size:24px;color:#0a46ff;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ site_name }}</div>
<div data-thirds="text" data-thirds-id="page-title" data-thirds-name="Page title" style="left:80px;top:190px;width:1040px;height:240px;font-size:80px;color:#0b0b0b;font-weight:800;line-height:1.05;letter-spacing:-3px;" data-thirds-fit="shrink" data-thirds-min-font="36" data-thirds-max-font="80">{{ page_title }}</div>
<div data-thirds="text" data-thirds-id="description" data-thirds-name="Description" style="left:80px;top:460px;width:1040px;height:80px;font-size:30px;color:#575f6d;font-weight:400;line-height:1.3;" data-thirds-fit="shrink" data-thirds-min-font="18" data-thirds-max-font="30">{{ description }}</div>
<div data-thirds="box" data-thirds-id="footer-rule" data-thirds-name="Footer rule" style="left:80px;top:566px;width:1040px;height:2px;background:#dde1e8"></div>
<div data-thirds="text" data-thirds-id="site-url" data-thirds-name="Site URL" style="left:80px;top:582px;width:1040px;height:30px;font-size:20px;color:#0a46ff;font-weight:700;line-height:1.2;">{{ site_url }}</div>
</div>
</body>
</html>
Sample data
The values that made the picture.
Change any of them, and the same HTML makes a new file.
{
"site_name": "Orbit Analytics",
"page_title": "How to build a weekly report your team reads",
"description": "A five-step guide with a free template, from the Orbit Analytics blog.",
"site_url": "orbit-analytics.example/blog/weekly-report"
}