Data Display timelinehorizontaldata

Horizontal Timeline

Side-scrolling event tracker with distinct timestamps.

2022Founded
2023Global
2024V2.0

Usage

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

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

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

Manual Installation

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

astro 
---
---
<div class="h-timeline">
  <div class="h-line"></div>
  <div class="h-item"><span>2022</span><strong>Founded</strong></div>
  <div class="h-item"><span>2023</span><strong>Global</strong></div>
  <div class="h-item curr"><span>2024</span><strong>V2.0</strong></div>
</div>
<style>
  .h-timeline { display: flex; justify-content: space-between; position: relative; padding: 2rem 0; width: 100%; max-width: 600px; margin: 0 auto; }
  .h-line { position: absolute; top: 3.2rem; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.1); }
  .h-item { text-align: center; position: relative; z-index: 1; min-width: 80px; }
  .h-item span { display: block; font-size: 0.7rem; color: #64748b; margin-bottom: 2rem; font-weight: 700; }
  .h-item::after { content: ""; position: absolute; left: 50%; top: 1.1rem; width: 16px; height: 16px; background: #1e293b; border: 3px solid #334155; border-radius: 50%; transform: translateX(-50%); transition: 0.3s; }
  strong { display: block; color: #fff; font-size: 0.85rem; }
  .curr strong { color: #6366f1; }
  .curr::after { background: #6366f1; border-color: #080b14; box-shadow: 0 0 15px rgba(99, 102, 241, 0.6); }
</style>
--- --- <div class="h-timeline"> <div class="h-line"></div> <div class="h-item"><span>2022</span><strong>Founded</strong></div> <div class="h-item"><span>2023</span><strong>Global</strong></div> <div class="h-item curr"><span>2024</span><strong>V2.0</strong></div> </div> <style> .h-timeline { display: flex; justify-content: space-between; position: relative; padding: 2rem 0; width: 100%; max-width: 600px; margin: 0 auto; } .h-line { position: absolute; top: 3.2rem; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.1); } .h-item { text-align: center; position: relative; z-index: 1; min-width: 80px; } .h-item span { display: block; font-size: 0.7rem; color: #64748b; margin-bottom: 2rem; font-weight: 700; } .h-item::after { content: ""; position: absolute; left: 50%; top: 1.1rem; width: 16px; height: 16px; background: #1e293b; border: 3px solid #334155; border-radius: 50%; transform: translateX(-50%); transition: 0.3s; } strong { display: block; color: #fff; font-size: 0.85rem; } .curr strong { color: #6366f1; } .curr::after { background: #6366f1; border-color: #080b14; box-shadow: 0 0 15px rgba(99, 102, 241, 0.6); } </style>

Quick Info

Category
Data Display
Filename
HorizontalTimeline.astro
Dependencies
None — pure Astro + CSS
Tags
timelinehorizontaldata