Thread Timeline
Conversational thread format where each moment reads like a message. Tight left-aligned thread line with chat-bubble entries and system-event dividers. Perfect for healthcare patient histories, support ticket logs, or onboarding checklists that tell a human story step by step.
Thread Timeline the 7th 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
<div class="tl7-wrap">
<div class="tl7-thread"></div>
<div class="tl7-entry tl7-system">
<div class="tl7-avatar" aria-hidden="true">●</div>
<div class="tl7-bubble">
<p class="tl7-msg">Patient record opened · Case #PT-20419 · Admitted 08 Jan 2025</p>
</div>
</div>
<div class="tl7-entry">
<div class="tl7-avatar" aria-hidden="true">DR</div>
<div class="tl7-bubble">
<p class="tl7-who">Dr. Ananya Rao — Attending</p>
<p class="tl7-msg">Initial assessment complete. Patient presents with persistent fatigue and elevated markers. Ordering full metabolic panel and chest imaging. Suspect autoimmune involvement — referring to rheumatology.</p>
<span class="tl7-ts">08 Jan 2025 · 09:14</span>
</div>
</div>
<div class="tl7-entry">
<div class="tl7-avatar" aria-hidden="true">LB</div>
<div class="tl7-bubble">
<p class="tl7-who">Lab Results — Pathology</p>
<p class="tl7-msg">ANA titre: 1:320 (positive). Anti-dsDNA elevated at 48 IU/mL. ESR 72 mm/hr. Results forwarded to rheumatology and attending physician.</p>
<span class="tl7-ts">10 Jan 2025 · 14:32</span>
</div>
</div>
<div class="tl7-entry">
<div class="tl7-avatar" aria-hidden="true">RH</div>
<div class="tl7-bubble">
<p class="tl7-who">Dr. Marcos Lima — Rheumatology</p>
<p class="tl7-msg">Based on clinical picture and serology, diagnosis consistent with SLE. Initiating hydroxychloroquine 400mg daily. Scheduling follow-up in 6 weeks. Patient counselled on sun avoidance and flare recognition.</p>
<span class="tl7-ts">15 Jan 2025 · 11:05</span>
</div>
</div>
<div class="tl7-entry tl7-system">
<div class="tl7-avatar tl7-avatar-ok" aria-hidden="true">✓</div>
<div class="tl7-bubble tl7-bubble-ok">
<p class="tl7-msg">Medication dispensed · Pharmacy confirmed · Insurance pre-auth approved</p>
</div>
</div>
<div class="tl7-entry">
<div class="tl7-avatar" aria-hidden="true">NS</div>
<div class="tl7-bubble">
<p class="tl7-who">Nurse Yuki Tanaka — Follow-up</p>
<p class="tl7-msg">6-week check-in completed. Patient reports reduced fatigue, joint pain improved significantly. No adverse drug reactions noted. Labs trending in right direction — ESR down to 41 mm/hr.</p>
<span class="tl7-ts">26 Feb 2025 · 10:20</span>
</div>
</div>
</div> .tl7-wrap {
--tl7-bg: #0c1117;
--tl7-a: #00e5c8;
background: var(--tl7-bg);
padding: 2.5rem 1.75rem;
max-width: 600px;
margin: 0 auto;
position: relative;
font-family: 'Inter', system-ui, sans-serif;
}
.tl7-thread {
position: absolute;
left: calc(1.75rem + 19px);
top: 2.5rem;
bottom: 2.5rem;
width: 1px;
background: linear-gradient(to bottom, var(--tl7-a), rgba(0,229,200,0.05));
}
.tl7-entry {
display: flex;
gap: 1.25rem;
align-items: flex-start;
margin-bottom: 1.5rem;
position: relative;
}
.tl7-entry:last-child { margin-bottom: 0; }
.tl7-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--tl7-a);
position: relative;
z-index: 2;
border: 1px solid rgba(0,229,200,0.3);
background: rgba(0,229,200,0.08);
box-shadow: 0 0 0 3px var(--tl7-bg);
}
.tl7-bubble {
flex: 1;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 4px 16px 16px 16px;
padding: 0.85rem 1rem;
transition: border-color 0.2s, background 0.2s;
}
.tl7-bubble:hover {
background: rgba(0,229,200,0.05);
border-color: rgba(0,229,200,0.2);
}
.tl7-who {
font-family: ui-monospace, monospace;
font-size: 11px;
color: var(--tl7-a);
letter-spacing: 0.5px;
margin-bottom: 0.3rem;
}
.tl7-msg {
font-size: 13.5px;
color: rgba(255,255,255,0.78);
line-height: 1.6;
}
.tl7-ts {
display: block;
font-family: ui-monospace, monospace;
font-size: 10px;
color: rgba(255,255,255,0.3);
margin-top: 0.5rem;
}
.tl7-system .tl7-bubble {
background: transparent;
border-style: dashed;
border-color: rgba(255,255,255,0.08);
border-radius: 8px;
text-align: center;
}
.tl7-system .tl7-msg {
font-family: ui-monospace, monospace;
font-size: 11px;
color: rgba(255,255,255,0.4);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.tl7-avatar-ok {
background: rgba(0,229,200,0.12);
border-color: rgba(0,229,200,0.3);
color: var(--tl7-a);
}
.tl7-bubble-ok {
border-color: rgba(0,229,200,0.2) !important;
background: rgba(0,229,200,0.04) !important;
}
@media (max-width: 480px) {
.tl7-wrap { padding: 1.5rem 1rem; }
.tl7-thread { left: calc(1rem + 19px); }
}