Data Display timelineeventsdata

Vertical Timeline

Chronological list of events with a continuous vertical line and dot indicators.

Oct 2024

V2 Release

Launched the modular registry architecture.

Aug 2024

Beta Phase

Community testing and initial component set.

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { VerticalTimeline } from 'astro-component-kit';
---

<VerticalTimeline>Content</VerticalTimeline>
--- import { VerticalTimeline } from 'astro-component-kit'; --- <VerticalTimeline>Content</VerticalTimeline>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/VerticalTimeline.astro and paste the following code:

astro 
---
---
<div class="timeline-v">
  <div class="t-item">
    <div class="t-date">Oct 2024</div>
    <div class="t-content"><h4>V2 Release</h4><p>Launched the modular registry architecture.</p></div>
  </div>
  <div class="t-item">
    <div class="t-date">Aug 2024</div>
    <div class="t-content"><h4>Beta Phase</h4><p>Community testing and initial component set.</p></div>
  </div>
</div>
<style>
  .timeline-v { position: relative; padding-left: 2rem; }
  .timeline-v::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(99,102,241,0.2); }
  .t-item { position: relative; margin-bottom: 2.5rem; }
  .t-item::after { content: ""; position: absolute; left: -2.35rem; top: 5px; width: 12px; height: 12px; background: #6366f1; border: 3px solid #080b14; border-radius: 50%; }
  .t-date { font-size: 0.75rem; font-weight: 700; color: #6366f1; margin-bottom: 0.25rem; }
  h4 { color: #fff; margin: 0; }
  p { font-size: 0.85rem; color: #94a3b8; margin-top: 0.25rem; }
</style>
--- --- <div class="timeline-v"> <div class="t-item"> <div class="t-date">Oct 2024</div> <div class="t-content"><h4>V2 Release</h4><p>Launched the modular registry architecture.</p></div> </div> <div class="t-item"> <div class="t-date">Aug 2024</div> <div class="t-content"><h4>Beta Phase</h4><p>Community testing and initial component set.</p></div> </div> </div> <style> .timeline-v { position: relative; padding-left: 2rem; } .timeline-v::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(99,102,241,0.2); } .t-item { position: relative; margin-bottom: 2.5rem; } .t-item::after { content: ""; position: absolute; left: -2.35rem; top: 5px; width: 12px; height: 12px; background: #6366f1; border: 3px solid #080b14; border-radius: 50%; } .t-date { font-size: 0.75rem; font-weight: 700; color: #6366f1; margin-bottom: 0.25rem; } h4 { color: #fff; margin: 0; } p { font-size: 0.85rem; color: #94a3b8; margin-top: 0.25rem; } </style>

Quick Info

Category
Data Display
Filename
VerticalTimeline.astro
Dependencies
None — pure Astro + CSS
Tags
timelineeventsdata