{"id":"5682f103-d1e5-4275-9b02-0adeb4794d50","name":"Editorial Blog Header","slug":"editorial-blog-header","category":"blog-images","description":"A refined editorial blog header with a colored kicker, a large serif headline, and an author byline with reading time — perfect as a hero or social card for articles, newsletters and changelogs.","sample_params":{"author":"Liam van der Viven","kicker":"Engineering","read_time":"8 min read","title":"How we cut image render times by 90% with a smarter cache key"},"spec":{"name":"editorial-blog-header","width":1200,"height":630,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003cstyle\u003e\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  html, body { width: 100vw; height: 100vh; overflow: hidden; }\n  .canvas {\n    position: relative;\n    width: 100vw; height: 100vh;\n    display: flex; flex-direction: column; justify-content: space-between;\n    padding: 72px 84px 60px;\n    background:\n      radial-gradient(1100px 620px at 88% -12%, hsla(var(--h), 85%, 62%, 0.16), transparent 62%),\n      radial-gradient(900px 560px at -8% 112%, hsla(calc(var(--h) + 40), 80%, 60%, 0.12), transparent 60%),\n      linear-gradient(165deg, #fdfcf9 0%, #f6f3ec 100%);\n    color: #1c1a17;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;\n  }\n  .edge {\n    position: absolute; top: 0; left: 0; right: 0; height: 10px; z-index: 1;\n    background: linear-gradient(90deg, hsl(var(--h), 78%, 46%), hsl(calc(var(--h) + 42), 80%, 54%));\n  }\n  .grain {\n    position: absolute; inset: 0; z-index: 0; opacity: 0.5;\n    background-image: radial-gradient(rgba(28, 26, 23, 0.07) 1px, transparent 1px);\n    background-size: 26px 26px;\n    -webkit-mask-image: linear-gradient(115deg, transparent 42%, black 100%);\n    mask-image: linear-gradient(115deg, transparent 42%, black 100%);\n  }\n  .top, .main, .byline { position: relative; z-index: 2; }\n  .kicker {\n    display: inline-flex; align-items: center; gap: 14px;\n    font-size: 24px; font-weight: 700;\n    letter-spacing: 0.22em; text-transform: uppercase;\n    color: hsl(var(--h), 72%, 38%);\n    max-width: 1032px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;\n  }\n  .kicker::before {\n    content: ''; display: inline-block; flex: none;\n    width: 44px; height: 4px; border-radius: 2px;\n    background: linear-gradient(90deg, hsl(var(--h), 78%, 46%), hsl(calc(var(--h) + 42), 80%, 54%));\n  }\n  .title {\n    font-family: Georgia, 'Times New Roman', serif;\n    font-size: 72px; line-height: 1.12; font-weight: 700;\n    letter-spacing: -0.015em;\n    max-width: 1010px;\n    overflow-wrap: break-word;\n    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;\n  }\n  .byline {\n    display: flex; align-items: center; gap: 20px;\n    padding-top: 34px;\n    border-top: 1px solid rgba(28, 26, 23, 0.14);\n    font-size: 27px; color: #4d4842;\n  }\n  .avatar {\n    flex: none; width: 58px; height: 58px; border-radius: 50%;\n    display: flex; align-items: center; justify-content: center;\n    background: linear-gradient(135deg, hsl(var(--h), 76%, 44%), hsl(calc(var(--h) + 42), 78%, 52%));\n    color: #fff; font-size: 25px; font-weight: 700; letter-spacing: 0.02em;\n  }\n  .author { font-weight: 600; color: #26231f; max-width: 560px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n  .dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(28, 26, 23, 0.3); }\n  .read { white-space: nowrap; }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='canvas' style='--h: {{.hue}}'\u003e\n  \u003cdiv class='edge'\u003e\u003c/div\u003e\n  \u003cdiv class='grain'\u003e\u003c/div\u003e\n  \u003cdiv class='top'\u003e\n    \u003cspan class='kicker'\u003e{{.kicker}}\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class='main'\u003e\n    \u003ch1 class='title'\u003e{{.title}}\u003c/h1\u003e\n  \u003c/div\u003e\n  \u003cdiv class='byline'\u003e\n    \u003cspan class='avatar'\u003e{{.initials}}\u003c/span\u003e\n    \u003cspan class='author'\u003e{{.author}}\u003c/span\u003e\n    \u003cspan class='dot'\u003e\u003c/span\u003e\n    \u003cspan class='read'\u003e{{.read_time}}\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"author":{"type":"string","required":true,"maxLen":60,"description":"Author name shown in the byline."},"hue":{"type":"number","default":"246","maxLen":6,"description":"Accent hue in degrees (0-360) for the kicker, top edge and avatar gradient."},"initials":{"type":"string","default":"✍","maxLen":3,"description":"One to three characters shown in the round avatar badge, e.g. the author's initials."},"kicker":{"type":"string","default":"Blog","maxLen":40,"description":"Short uppercase section label above the title, e.g. the blog category."},"read_time":{"type":"string","default":"5 min read","maxLen":24,"description":"Reading time label, e.g. '8 min read'."},"title":{"type":"string","required":true,"maxLen":140,"description":"The article headline. Clamped to four lines."}}}}