Incident Timeline
Incident detail card with a resolved header, a four-phase chronological update rail, and a postmortem link at the foot.
Incident detail card with a resolved header, a four-phase chronological update rail, and a postmortem link at the foot.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Incident Timeline is the detail view for a resolved incident: a header card shows INC-2026-0041, Elevated error rates on the API, started Jun 12 14:02 and resolved 16:47 (2h 45m), then four updates on a left vertical rail: Investigating, Identified, Monitoring, Resolved, each with its timestamp and a plain paragraph of what engineers knew at that moment. A postmortem card sits at the foot with a Read postmortem link.
Updates are a typed const array with an UpdatePhase union steering both the dot opacity and the Badge variant. The rail is a positioned div, no SVG, no library.
Reach for this block on the incident detail page of a status site, linked from each incident row in the incident history list. Wire the updates array to your incident log and the postmortem link to your docs host.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the resolved incident detail. Other timeline shapes:
Tip: the body copy at each phase is the real work, writing what you knew and when is what turns an incident into a trust-building document.