Vitals Timeline
Clinical procedural timeline with a live EKG SVG trace, four colour-coded readouts (HR, SpO₂, BP, temp), and alert pulses on critical events. Built for surgical case logs, anaesthesia records, and incident retrospectives in healthcare environments.
Vitals Timeline the 3rd of 24 designs in the 24 CSS Timeline Layouts collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<section class="tl3-wrap">
<header class="tl3-head">
<h2 class="tl3-title">Mitral Valve <em>Repair</em><br>OR-3 · 08:14:22</h2>
<div class="tl3-patient">
<strong>PT · ID-449201 · M · 58y</strong><br>
ASA III · BMI 27.4<br>
Lead surgeon: Dr. A. Okafor<br>
Anesthesia: GA · ETT
</div>
</header>
<div class="tl3-monitor">
<div class="tl3-readouts">
<div class="tl3-readout tl3-hr">
<div class="tl3-lbl">Heart Rate</div>
<div class="tl3-val">72<span class="tl3-unit">bpm</span></div>
</div>
<div class="tl3-readout tl3-sp">
<div class="tl3-lbl">SpO₂</div>
<div class="tl3-val">99<span class="tl3-unit">%</span></div>
</div>
<div class="tl3-readout tl3-bp">
<div class="tl3-lbl">BP · MAP</div>
<div class="tl3-val">118/74<span class="tl3-unit"> · 89</span></div>
</div>
<div class="tl3-readout tl3-tp">
<div class="tl3-lbl">Core Temp</div>
<div class="tl3-val">36.4<span class="tl3-unit">°C</span></div>
</div>
</div>
<div class="tl3-ekg">
<svg viewBox="0 0 1000 80" preserveAspectRatio="none" aria-hidden="true">
<path class="tl3-trace" d="M0,40 L100,40 L110,40 L115,20 L120,60 L125,10 L130,70 L135,40 L240,40 L250,40 L255,20 L260,60 L265,10 L270,70 L275,40 L380,40 L390,40 L395,20 L400,60 L405,10 L410,70 L415,40 L520,40 L530,40 L535,20 L540,60 L545,10 L550,70 L555,40 L660,40 L670,40 L675,20 L680,60 L685,10 L690,70 L695,40 L800,40 L810,40 L815,20 L820,60 L825,10 L830,70 L835,40 L940,40 L950,40 L955,20 L960,60 L965,10 L970,70 L975,40 L1000,40"/>
</svg>
</div>
</div>
<div class="tl3-timeline">
<div class="tl3-step">
<div class="tl3-time">07:42<span class="tl3-elapsed">T−00:32</span></div>
<div>
<h4 class="tl3-step-title">Pre-op briefing & timeout</h4>
<p class="tl3-step-body">Patient identity, procedure, and site confirmed by surgical team per WHO checklist. Blood products on standby (2u PRBC, 2u FFP). Cardiac echo reviewed.</p>
<div class="tl3-tags"><span class="tl3-tag tl3-ok">CHECKLIST CLEAR</span><span class="tl3-tag">ECHO ✓</span></div>
</div>
</div>
<div class="tl3-step">
<div class="tl3-time">08:14<span class="tl3-elapsed">T+00:00</span></div>
<div>
<h4 class="tl3-step-title">Induction & intubation</h4>
<p class="tl3-step-body">Propofol 200mg / fentanyl 200mcg / rocuronium 50mg. ETT 8.0 placed without difficulty, confirmed by capnography and bilateral breath sounds. Arterial line right radial.</p>
<div class="tl3-tags"><span class="tl3-tag tl3-ok">AIRWAY ✓</span><span class="tl3-tag">A-LINE R RADIAL</span></div>
</div>
</div>
<div class="tl3-step">
<div class="tl3-time">08:46<span class="tl3-elapsed">T+00:32</span></div>
<div>
<h4 class="tl3-step-title">Median sternotomy</h4>
<p class="tl3-step-body">Skin incision and sternal split with oscillating saw. Retractor placed. Pericardium opened in inverted-T fashion, sutured to drapes. Heparin 30,000u administered.</p>
<div class="tl3-tags"><span class="tl3-tag">ACT pending</span><span class="tl3-tag tl3-ok">HEMOSTASIS</span></div>
</div>
</div>
<div class="tl3-step tl3-alert">
<div class="tl3-time">09:11<span class="tl3-elapsed">T+00:57</span></div>
<div>
<h4 class="tl3-step-title">Transient hypotension on aortic cannulation</h4>
<p class="tl3-step-body">MAP fell to 52 momentarily during cannulation; corrected with 100mcg phenylephrine bolus and 250ml volume. ACT now 480s, on bypass within 90 seconds.</p>
<div class="tl3-tags"><span class="tl3-tag tl3-crit">ALERT · MAP 52</span><span class="tl3-tag tl3-ok">CORRECTED</span><span class="tl3-tag">CPB INITIATED</span></div>
</div>
</div>
<div class="tl3-step">
<div class="tl3-time">09:24<span class="tl3-elapsed">T+01:10</span></div>
<div>
<h4 class="tl3-step-title">Cross-clamp & cardioplegia</h4>
<p class="tl3-step-body">Aortic cross-clamp applied. Antegrade cold blood cardioplegia delivered, asystole achieved within 60s. Cooling to 32°C systemic.</p>
<div class="tl3-tags"><span class="tl3-tag">XCL 09:24</span><span class="tl3-tag tl3-ok">ARREST CONFIRMED</span></div>
</div>
</div>
<div class="tl3-step">
<div class="tl3-time">10:02<span class="tl3-elapsed">T+01:48</span></div>
<div>
<h4 class="tl3-step-title">Triangular resection + annuloplasty ring</h4>
<p class="tl3-step-body">P2 segment resected and reapproximated with 4-0 prolene. Cosgrove 32mm annuloplasty band placed with interrupted 2-0 ethibond. Saline test: no regurgitation.</p>
<div class="tl3-tags"><span class="tl3-tag tl3-ok">REPAIR ✓</span><span class="tl3-tag tl3-ok">SALINE TEST DRY</span></div>
</div>
</div>
<div class="tl3-step">
<div class="tl3-time">10:34<span class="tl3-elapsed">T+02:20</span></div>
<div>
<h4 class="tl3-step-title">Wean from bypass · TEE confirms</h4>
<p class="tl3-step-body">Cross-clamp off, spontaneous sinus rhythm. Weaning slow with low-dose epi (0.03 mcg/kg/min). TEE shows trace MR, mean gradient 3mmHg. Sternum closed in standard fashion.</p>
<div class="tl3-tags"><span class="tl3-tag tl3-ok">OFF BYPASS</span><span class="tl3-tag tl3-ok">TEE: TRACE MR</span><span class="tl3-tag">EPI 0.03</span></div>
</div>
</div>
</div>
</section> .tl3-wrap {
background: #0d1612;
color: #d4e8e0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
padding: 2rem;
}
.tl3-head {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 1.5rem;
border-bottom: 1px solid #2a4038;
padding-bottom: 1rem;
gap: 1.5rem;
}
.tl3-title {
font-family: Georgia, serif;
font-weight: 400;
font-size: clamp(1.5rem, 4vw, 2.5rem);
line-height: 1;
color: #fff;
letter-spacing: -0.02em;
margin: 0;
}
.tl3-title em { font-style: italic; color: #4fc88f; }
.tl3-patient {
font-size: 10.5px;
line-height: 1.6;
text-align: right;
color: #8aaaa0;
}
.tl3-patient strong { color: #fff; }
.tl3-monitor {
background: #060d0a;
border: 1px solid #2a4038;
border-radius: 4px;
padding: 1.25rem;
margin-bottom: 1.25rem;
position: relative;
overflow: hidden;
}
.tl3-monitor::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(79,200,143,0.03) 3px 4px);
pointer-events: none;
}
.tl3-readouts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
margin-bottom: 0.75rem;
}
.tl3-readout { border-left: 2px solid; padding-left: 0.75rem; }
.tl3-hr { border-color: #ff4d6d; }
.tl3-sp { border-color: #4fc88f; }
.tl3-bp { border-color: #ffa726; }
.tl3-tp { border-color: #4dc4ff; }
.tl3-lbl {
font-size: 9px;
letter-spacing: 0.2em;
color: #8aaaa0;
text-transform: uppercase;
}
.tl3-val {
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
margin-top: 0.25rem;
}
.tl3-hr .tl3-val { color: #ff4d6d; }
.tl3-sp .tl3-val { color: #4fc88f; }
.tl3-bp .tl3-val { color: #ffa726; }
.tl3-tp .tl3-val { color: #4dc4ff; }
.tl3-unit {
font-size: 10px;
color: #8aaaa0;
margin-left: 4px;
font-weight: 400;
}
.tl3-ekg { height: 70px; width: 100%; position: relative; }
.tl3-ekg svg { width: 100%; height: 100%; display: block; }
.tl3-trace {
stroke: #4fc88f;
stroke-width: 1.5;
fill: none;
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: tl3-ekg 4s linear infinite;
filter: drop-shadow(0 0 4px rgba(79,200,143,0.6));
}
@keyframes tl3-ekg { to { stroke-dashoffset: 0; } }
.tl3-timeline {
position: relative;
padding: 1rem 0;
}
.tl3-timeline::before {
content: '';
position: absolute;
left: 24px;
top: 0; bottom: 0;
width: 1px;
background: linear-gradient(180deg, #2a4038, #4fc88f, #2a4038);
}
.tl3-step {
display: grid;
grid-template-columns: 90px 1fr;
gap: 1.5rem;
padding: 0.75rem 0 1.25rem;
position: relative;
}
.tl3-time {
font-size: 12px;
font-weight: 700;
color: #4fc88f;
letter-spacing: 0.05em;
text-align: right;
}
.tl3-elapsed {
display: block;
font-size: 9px;
color: #8aaaa0;
letter-spacing: 0.15em;
margin-top: 2px;
font-weight: 400;
}
.tl3-step::after {
content: '';
position: absolute;
left: 19px;
top: 18px;
width: 11px; height: 11px;
background: #0d1612;
border: 2px solid #4fc88f;
border-radius: 50%;
transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}
.tl3-step:hover::after {
background: #4fc88f;
transform: scale(1.4);
box-shadow: 0 0 12px rgba(79,200,143,0.8);
}
.tl3-step-title {
font-family: Georgia, serif;
font-weight: 700;
font-size: 1.1rem;
color: #fff;
margin: 0 0 0.35rem;
}
.tl3-step-body {
font-size: 11.5px;
line-height: 1.6;
color: #a8c0b8;
max-width: 700px;
margin: 0;
}
.tl3-tags {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
flex-wrap: wrap;
}
.tl3-tag {
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 3px 8px;
border: 1px solid #2a4038;
color: #8aaaa0;
}
.tl3-tag.tl3-crit { color: #ff4d6d; border-color: #ff4d6d; }
.tl3-tag.tl3-ok { color: #4fc88f; border-color: #4fc88f; }
.tl3-alert::after {
border-color: #ff4d6d;
animation: tl3-pulse-alert 1.5s infinite;
}
.tl3-alert .tl3-step-title { color: #ff4d6d; }
@keyframes tl3-pulse-alert {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,109,0.6); }
50% { box-shadow: 0 0 0 8px rgba(255,77,109,0); }
}
@media (max-width: 720px) {
.tl3-head { flex-direction: column; align-items: flex-start; }
.tl3-patient { text-align: left; }
.tl3-readouts { grid-template-columns: repeat(2, 1fr); }
}