{"id":"edf2052e-d81e-4d38-9089-549ccb2c3dd2","name":"Incident Status Timeline","slug":"incident-status-timeline","category":"incident-timelines","description":"A dark status-page timeline card that walks an incident through detected, mitigated and resolved as three connected, timestamped nodes — perfect for postmortems, status updates and social shares.","sample_params":{"detected_time":"09:14 UTC","duration":"1h 49m total","incident_id":"INC-2417","mitigated_time":"09:52 UTC","resolved_time":"11:03 UTC","severity":"SEV-2","title":"Elevated API error rates in eu-central"},"spec":{"name":"incident-status-timeline","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.inc-canvas{display:flex;flex-direction:column;justify-content:space-between;padding:64px 72px 56px;background:linear-gradient(135deg,#0b1220 0%,#111a2e 55%,#1a1330 100%);}\n.inc-head{display:flex;align-items:center;gap:16px;}\n.inc-id{font:600 22px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:#8b9bb8;border:1px solid rgba(139,155,184,.35);border-radius:8px;padding:8px 14px;}\n.inc-sev{font:700 20px/1 ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#ffb4a8;background:rgba(255,90,72,.14);border:1px solid rgba(255,120,100,.4);border-radius:999px;padding:9px 18px;}\n.inc-title{margin:26px 0 0;font:700 58px/1.14 ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:-.015em;color:#f4f7fc;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}\n.inc-track{position:relative;display:flex;justify-content:space-between;margin-top:24px;}\n.inc-line{position:absolute;top:17px;left:80px;right:80px;height:4px;border-radius:2px;background:linear-gradient(90deg,#ff5a48 0%,#f5a623 50%,#2fbf71 100%);opacity:.85;}\n.inc-stage{position:relative;z-index:1;width:300px;display:flex;flex-direction:column;align-items:center;text-align:center;}\n.inc-dot{width:38px;height:38px;border-radius:50%;box-sizing:border-box;border:5px solid #0b1220;}\n.inc-dot--detected{background:#ff5a48;box-shadow:0 0 0 6px rgba(255,90,72,.18),0 0 28px rgba(255,90,72,.35);}\n.inc-dot--mitigated{background:#f5a623;box-shadow:0 0 0 6px rgba(245,166,35,.18),0 0 28px rgba(245,166,35,.3);}\n.inc-dot--resolved{background:#2fbf71;box-shadow:0 0 0 6px rgba(47,191,113,.2),0 0 28px rgba(47,191,113,.4);}\n.inc-stage-name{margin-top:20px;font:700 26px/1 ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.14em;text-transform:uppercase;}\n.inc-stage-name--detected{color:#ff8d80;}\n.inc-stage-name--mitigated{color:#f7bd58;}\n.inc-stage-name--resolved{color:#5fd695;}\n.inc-stage-time{margin-top:10px;font:500 24px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:#aab6cc;overflow-wrap:break-word;max-width:290px;}\n.inc-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(139,155,184,.22);padding-top:22px;}\n.inc-duration{font:600 22px/1 ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:#8b9bb8;letter-spacing:.02em;}\n.inc-brand{font:700 20px/1 ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#5b6a86;}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='og-canvas inc-canvas og-bg-grid'\u003e\n  \u003cdiv\u003e\n    \u003cdiv class='inc-head'\u003e\n      \u003cspan class='inc-id'\u003e{{.incident_id}}\u003c/span\u003e\n      \u003cspan class='inc-sev'\u003e{{.severity}}\u003c/span\u003e\n    \u003c/div\u003e\n    \u003ch1 class='inc-title'\u003e{{.title}}\u003c/h1\u003e\n  \u003c/div\u003e\n  \u003cdiv class='inc-track'\u003e\n    \u003cdiv class='inc-line'\u003e\u003c/div\u003e\n    \u003cdiv class='inc-stage'\u003e\n      \u003cdiv class='inc-dot inc-dot--detected'\u003e\u003c/div\u003e\n      \u003cdiv class='inc-stage-name inc-stage-name--detected'\u003eDetected\u003c/div\u003e\n      \u003cdiv class='inc-stage-time'\u003e{{.detected_time}}\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class='inc-stage'\u003e\n      \u003cdiv class='inc-dot inc-dot--mitigated'\u003e\u003c/div\u003e\n      \u003cdiv class='inc-stage-name inc-stage-name--mitigated'\u003eMitigated\u003c/div\u003e\n      \u003cdiv class='inc-stage-time'\u003e{{.mitigated_time}}\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class='inc-stage'\u003e\n      \u003cdiv class='inc-dot inc-dot--resolved'\u003e\u003c/div\u003e\n      \u003cdiv class='inc-stage-name inc-stage-name--resolved'\u003eResolved\u003c/div\u003e\n      \u003cdiv class='inc-stage-time'\u003e{{.resolved_time}}\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class='inc-foot'\u003e\n    \u003cspan class='inc-duration'\u003e{{.duration}}\u003c/span\u003e\n    \u003cspan class='inc-brand'\u003eStatus\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"detected_time":{"type":"string","required":true,"maxLen":40,"description":"Timestamp for the Detected stage, e.g. '09:14 UTC' or 'Mar 4, 09:14'."},"duration":{"type":"string","maxLen":40,"description":"Optional total-duration line in the footer, e.g. '1h 49m total'."},"incident_id":{"type":"string","default":"INC-0001","maxLen":24,"description":"Short incident identifier shown as a monospace tag."},"mitigated_time":{"type":"string","required":true,"maxLen":40,"description":"Timestamp for the Mitigated stage."},"resolved_time":{"type":"string","required":true,"maxLen":40,"description":"Timestamp for the Resolved stage."},"severity":{"type":"string","default":"SEV-2","maxLen":16,"description":"Severity label shown as a red pill, e.g. SEV-1."},"title":{"type":"string","required":true,"maxLen":110,"description":"Incident title, e.g. the headline from your status page."}}}}