{"id":"6077edf2-7aa8-4d77-8b6f-7d7dd50df7fb","name":"Conference Speaker Card","slug":"conference-speaker-card","category":"speaker-cards","description":"A polished conference speaker announcement card with the speaker's name, talk title, track and time slot, plus an optional photo. Perfect for social promotion of sessions, keynotes and meetup lineups.","sample_params":{"event":"ShipCon 2026","speaker_name":"Amara Okafor","talk_title":"Designing APIs That Age Gracefully","time":"Thu 14:30 · Main Stage","track":"Platform Engineering"},"spec":{"name":"speaker-card","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; }\nhtml, body { width: 100vw; height: 100vh; overflow: hidden; }\nbody { font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }\n.canvas { position: relative; width: 100vw; height: 100vh; overflow: hidden; display: flex; background: linear-gradient(135deg, #0b1020 0%, #131b36 55%, #251749 100%); color: #f4f6fb; }\n.glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); }\n.glow-a { width: 560px; height: 560px; right: -140px; top: -180px; background: rgba(124, 92, 255, 0.42); }\n.glow-b { width: 460px; height: 460px; left: -160px; bottom: -220px; background: rgba(34, 199, 190, 0.22); }\n.edge { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(180deg, #8b5cf6, #22c7be); }\n.content { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 64px 48px 56px 72px; }\n.kicker { display: flex; align-items: center; gap: 16px; font-size: 24px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #b9c2e8; }\n.kicker-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c7be; }\n.track { display: inline-flex; align-self: flex-start; align-items: center; padding: 10px 22px; margin-bottom: 26px; border-radius: 999px; font-size: 22px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #dcd3ff; background: rgba(139, 92, 246, 0.18); border: 1.5px solid rgba(139, 92, 246, 0.55); }\n.title { font-size: 62px; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }\n.speaker { margin-top: 26px; font-size: 34px; font-weight: 600; color: #cdd5f2; overflow-wrap: break-word; }\n.speaker b { color: #ffffff; font-weight: 700; }\n.meta { display: flex; align-items: center; gap: 14px; font-size: 26px; font-weight: 600; color: #9fb0dd; }\n.meta-rule { flex: 0 0 46px; height: 2px; background: linear-gradient(90deg, #8b5cf6, #22c7be); border: 0; }\n.portrait { position: relative; z-index: 1; flex: 0 0 380px; display: flex; align-items: center; justify-content: center; padding-right: 64px; }\n.frame { width: 316px; height: 316px; border-radius: 50%; padding: 8px; background: linear-gradient(140deg, #8b5cf6, #22c7be); box-shadow: 0 24px 70px rgba(10, 8, 32, 0.55); }\n.frame-inner { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #0b1020; display: flex; align-items: center; justify-content: center; }\n.frame-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #2a2f55 0%, #171c38 70%); }\n.placeholder svg { width: 150px; height: 150px; }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='canvas'\u003e\n  \u003cdiv class='glow glow-a'\u003e\u003c/div\u003e\n  \u003cdiv class='glow glow-b'\u003e\u003c/div\u003e\n  \u003cdiv class='edge'\u003e\u003c/div\u003e\n  \u003cdiv class='content'\u003e\n    \u003cdiv class='kicker'\u003e\u003cspan class='kicker-dot'\u003e\u003c/span\u003e\u003cspan\u003e{{.event}}\u003c/span\u003e\u003c/div\u003e\n    \u003cdiv\u003e\n      \u003cspan class='track'\u003e{{.track}}\u003c/span\u003e\n      \u003ch1 class='title'\u003e{{.talk_title}}\u003c/h1\u003e\n      \u003cp class='speaker'\u003ewith \u003cb\u003e{{.speaker_name}}\u003c/b\u003e\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv class='meta'\u003e\u003chr class='meta-rule'\u003e\u003cspan\u003e{{.time}}\u003c/span\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class='portrait'\u003e\n    \u003cdiv class='frame'\u003e\n      \u003cdiv class='frame-inner'\u003e\n        {{if .photo}}\u003cimg src='{{.photo}}' alt=''\u003e{{else}}\u003cdiv class='placeholder'\u003e\u003csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'\u003e\u003ccircle cx='12' cy='8.2' r='3.6' fill='#5b6494'/\u003e\u003cpath d='M4.6 20c.9-3.6 3.9-5.6 7.4-5.6s6.5 2 7.4 5.6' stroke='#5b6494' stroke-width='2.4' stroke-linecap='round' fill='none'/\u003e\u003c/svg\u003e\u003c/div\u003e{{end}}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"event":{"type":"string","default":"Conference","maxLen":50,"description":"Event or conference name, shown as the top kicker."},"photo":{"type":"image_url","maxLen":500,"description":"Optional https URL of the speaker's photo; a placeholder avatar is shown when omitted."},"speaker_name":{"type":"string","required":true,"maxLen":80,"description":"Full name of the speaker."},"talk_title":{"type":"string","required":true,"maxLen":140,"description":"Title of the talk or session."},"time":{"type":"string","required":true,"maxLen":60,"description":"Time slot and optionally the stage, e.g. 'Thu 14:30 · Main Stage'."},"track":{"type":"string","default":"Keynote","maxLen":40,"description":"Conference track or session category, shown as a pill."}}}}