{"id":"88f162a3-c1e7-47e3-af6b-b918e634f26c","name":"Split Accent OG Card","slug":"split-accent-og-card","category":"open-graph-images","description":"A clean light Open Graph image with a bold color accent bar, kicker, headline and site footer — tune the accent hue per page for editorial, docs and blog link previews.","sample_params":{"description":"Set one hue parameter and every page gets an on-brand social card.","hue":"165","kicker":"Engineering Blog","site":"media0.dev","title":"Ship link previews that match your brand"},"spec":{"name":"og-split-accent","width":1200,"height":630,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003clink rel='stylesheet' href='/lib/og.css'\u003e\n\u003cstyle\u003e\n.split{width:100vw;height:100vh;display:flex;overflow:hidden;background:linear-gradient(160deg,#ffffff 0%,#f1f5f9 100%);color:#0f172a;}\n.split-bar{flex:0 0 26px;background:linear-gradient(180deg,hsl(var(--h,250) 72% 46%) 0%,hsl(calc(var(--h,250) + 45) 78% 55%) 100%);}\n.split-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:72px 84px;position:relative;z-index:1;}\n.split-kicker{display:inline-flex;align-items:center;gap:16px;font-size:26px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:hsl(var(--h,250) 65% 40%);}\n.split-kicker::before{content:'';width:44px;height:6px;border-radius:3px;background:hsl(var(--h,250) 70% 48%);}\n.split-title{font-size:78px;font-weight:800;line-height:1.06;letter-spacing:-0.025em;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}\n.split-desc{font-size:33px;line-height:1.4;color:#475569;max-width:21em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}\n.split-footer{display:flex;align-items:center;gap:20px;font-size:27px;font-weight:600;color:#334155;}\n.split-dot{width:14px;height:14px;border-radius:50%;background:hsl(var(--h,250) 70% 48%);}\n.split-corner{position:absolute;z-index:0;right:-170px;bottom:-170px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle at 30% 30%,hsl(var(--h,250) 75% 55% / 0.16) 0%,hsl(var(--h,250) 75% 55% / 0) 70%);}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='split og-bg-grid' style='--h: {{.hue}}'\u003e\n  \u003cdiv class='split-bar'\u003e\u003c/div\u003e\n  \u003cdiv class='split-main'\u003e\n    \u003cdiv class='split-corner'\u003e\u003c/div\u003e\n    \u003cspan class='split-kicker'\u003e{{.kicker}}\u003c/span\u003e\n    \u003cdiv style='display:flex;flex-direction:column;gap:26px;'\u003e\n      \u003ch1 class='split-title'\u003e{{.title}}\u003c/h1\u003e\n      \u003cp class='split-desc'\u003e{{.description}}\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv class='split-footer'\u003e\u003cspan class='split-dot'\u003e\u003c/span\u003e\u003cspan\u003e{{.site}}\u003c/span\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"description":{"type":"string","maxLen":200,"description":"Supporting sentence under the headline."},"hue":{"type":"number","default":"250","maxLen":6,"description":"Accent hue 0-360 driving the bar, kicker and footer dot color."},"kicker":{"type":"string","default":"Blog","maxLen":40,"description":"Small uppercase label above the headline, e.g. a section or category."},"site":{"type":"string","default":"example.com","maxLen":60,"description":"Site or brand name shown in the footer."},"title":{"type":"string","required":true,"maxLen":120,"description":"Main headline of the card."}}}}