about timeline history milestones company timeline history milestones years company about company history timeline milestone timeline with alternating layout
About Timeline
Fetch pattern JSON:
curl https://webspire.de/patterns/about/timeline.json timeline.html
<section class="ws-about bg-[var(--ws-about-bg)] px-6 py-20">
<div class="mx-auto max-w-3xl text-center">
<h2
class="text-3xl font-bold tracking-tight text-[var(--ws-about-text)] sm:text-4xl"
>
Our Journey
</h2>
<p class="mt-4 text-base text-[var(--ws-about-text-soft)]">
From a small side project to a platform used by thousands of teams
worldwide.
</p>
</div>
<div class="relative mx-auto mt-16 max-w-4xl">
<!-- Vertical line -->
<div
class="absolute left-1/2 top-0 hidden h-full w-px -translate-x-1/2 bg-[var(--ws-about-border)] lg:block"
aria-hidden="true"
></div>
<div
class="absolute left-4 top-0 h-full w-px bg-[var(--ws-about-border)] lg:hidden"
aria-hidden="true"
></div>
<div class="space-y-12">
<!-- 2020 — Left -->
<div class="relative grid gap-6 lg:grid-cols-2 lg:gap-12">
<div class="lg:text-right">
<span
class="inline-flex rounded-full bg-[var(--ws-about-accent)]/10 px-3 py-1 text-xs font-semibold text-[var(--ws-about-accent)]"
>2020</span
>
<h3 class="mt-3 text-lg font-semibold text-[var(--ws-about-text)]">
The Beginning
</h3>
<p class="mt-2 text-sm text-[var(--ws-about-text-soft)]">
Started as an internal CSS library with 50 utility classes. The goal
was simple: stop copy-pasting the same styles across projects.
</p>
</div>
<div class="hidden lg:block"></div>
<div
class="absolute left-4 top-1 h-3 w-3 rounded-full border-2 border-[var(--ws-about-accent)] bg-[var(--ws-about-bg)] lg:left-1/2 lg:-translate-x-1/2"
aria-hidden="true"
></div>
</div>
<!-- 2022 — Right -->
<div class="relative grid gap-6 lg:grid-cols-2 lg:gap-12">
<div class="hidden lg:block"></div>
<div>
<span
class="inline-flex rounded-full bg-[var(--ws-about-accent)]/10 px-3 py-1 text-xs font-semibold text-[var(--ws-about-accent)]"
>2022</span
>
<h3 class="mt-3 text-lg font-semibold text-[var(--ws-about-text)]">
Open Platform
</h3>
<p class="mt-2 text-sm text-[var(--ws-about-text-soft)]">
Rebuilt as a token-driven pattern registry. Introduced the family
model, machine-readable metadata, and multi-target output for HTML,
Astro, and Web Components.
</p>
</div>
<div
class="absolute left-4 top-1 h-3 w-3 rounded-full border-2 border-[var(--ws-about-accent)] bg-[var(--ws-about-bg)] lg:left-1/2 lg:-translate-x-1/2"
aria-hidden="true"
></div>
</div>
<!-- 2024 — Left -->
<div class="relative grid gap-6 lg:grid-cols-2 lg:gap-12">
<div class="lg:text-right">
<span
class="inline-flex rounded-full bg-[var(--ws-about-accent)]/10 px-3 py-1 text-xs font-semibold text-[var(--ws-about-accent)]"
>2024</span
>
<h3 class="mt-3 text-lg font-semibold text-[var(--ws-about-text)]">
AI-Ready Registry
</h3>
<p class="mt-2 text-sm text-[var(--ws-about-text-soft)]">
Launched MCP integration and CLI tools. Patterns became discoverable
by AI agents, enabling natural-language component composition and
automated design system adoption.
</p>
</div>
<div class="hidden lg:block"></div>
<div
class="absolute left-4 top-1 h-3 w-3 rounded-full border-2 border-[var(--ws-about-accent)] bg-[var(--ws-about-bg)] lg:left-1/2 lg:-translate-x-1/2"
aria-hidden="true"
></div>
</div>
<!-- 2026 — Right -->
<div class="relative grid gap-6 lg:grid-cols-2 lg:gap-12">
<div class="hidden lg:block"></div>
<div>
<span
class="inline-flex rounded-full bg-[var(--ws-about-accent)]/10 px-3 py-1 text-xs font-semibold text-[var(--ws-about-accent)]"
>2026</span
>
<h3 class="mt-3 text-lg font-semibold text-[var(--ws-about-text)]">
Global Scale
</h3>
<p class="mt-2 text-sm text-[var(--ws-about-text-soft)]">
Serving teams worldwide. The registry keeps growing with new
patterns, CSS snippets, and production-ready templates.
</p>
</div>
<div
class="absolute left-4 top-1 h-3 w-3 rounded-full border-2 border-[var(--ws-about-accent)] bg-[var(--ws-about-bg)] lg:left-1/2 lg:-translate-x-1/2"
aria-hidden="true"
></div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
abouttimelinehistorymilestonescompany
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section heading and subtitle. |
| entries | Yes | Timeline entries with year, title, and description. |
Timeline variant showing four company milestones (2020, 2022, 2024, 2026) connected by a vertical line. Entries alternate left and right on desktop with year badges, titles, and descriptions. Falls back to left-aligned on mobile.