{"id":"f8553803-9c4e-4309-87e3-6eca226f1c05","name":"Milestone Card","slug":"milestone-card","category":"milestones","description":"Celebrate growth with a bold milestone card: one huge number, a label and a date on a rich gradient — perfect for announcing user counts, revenue marks and launch anniversaries.","sample_params":{"brand":"media0","date":"August 2026","label":"users on the platform","number":"10,000"},"spec":{"name":"milestone-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\u003clink rel='stylesheet' href='/lib/og.css'\u003e\n\u003cstyle\u003e\n.ms-canvas { position: relative; width: 100vw; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 56px 72px; box-sizing: border-box; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: radial-gradient(120% 140% at 85% -10%, #4338ca 0%, #1e1b4b 45%, #0b0a1f 100%); color: #fff; }\n.ms-glow { position: absolute; z-index: 0; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(closest-side, rgba(129,140,248,0.35), rgba(129,140,248,0)); top: -320px; right: -260px; }\n.ms-glow--b { width: 700px; height: 700px; background: radial-gradient(closest-side, rgba(236,72,153,0.18), rgba(236,72,153,0)); top: auto; right: auto; bottom: -300px; left: -220px; }\n.ms-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }\n.ms-kicker { font-size: 22px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(199,210,254,0.85); }\n.ms-date { font-size: 22px; font-weight: 600; color: rgba(255,255,255,0.65); font-variant-numeric: tabular-nums; }\n.ms-hero { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }\n.ms-number { font-size: 200px; line-height: 0.95; font-weight: 800; letter-spacing: -0.04em; margin: 0; background: linear-gradient(180deg, #ffffff 30%, #a5b4fc 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; overflow-wrap: break-word; }\n.ms-label { font-size: 42px; line-height: 1.2; font-weight: 600; color: rgba(255,255,255,0.92); margin: 0; max-width: 980px; overflow-wrap: break-word; }\n.ms-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; }\n.ms-brand { font-size: 24px; font-weight: 700; letter-spacing: 0.02em; color: rgba(255,255,255,0.85); white-space: nowrap; }\n.ms-rule { flex: 1; height: 2px; border: 0; margin: 0; background: linear-gradient(90deg, rgba(165,180,252,0.6), rgba(165,180,252,0)); }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='ms-canvas'\u003e\n  \u003cdiv class='ms-glow'\u003e\u003c/div\u003e\n  \u003cdiv class='ms-glow ms-glow--b'\u003e\u003c/div\u003e\n  \u003cdiv class='ms-head'\u003e\n    \u003cspan class='ms-kicker'\u003e{{.kicker}}\u003c/span\u003e\n    \u003cspan class='ms-date'\u003e{{.date}}\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class='ms-hero'\u003e\n    \u003ch1 class='ms-number'\u003e{{.number}}\u003c/h1\u003e\n    \u003cp class='ms-label'\u003e{{.label}}\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cdiv class='ms-foot'\u003e\n    \u003cspan class='ms-brand'\u003e{{.brand}}\u003c/span\u003e\n    \u003chr class='ms-rule'\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"brand":{"type":"string","maxLen":40,"description":"Brand or product name shown in the footer."},"date":{"type":"string","maxLen":40,"description":"When the milestone was reached, e.g. August 2026."},"kicker":{"type":"string","default":"Milestone","maxLen":32,"description":"Small uppercase eyebrow text in the top-left corner."},"label":{"type":"string","required":true,"maxLen":80,"description":"What the number counts, e.g. users on the platform."},"number":{"type":"string","required":true,"maxLen":16,"description":"The big milestone figure, e.g. 10,000 or $1M."}}}}