footer timeline history milestones story about timeline history milestones journey founding footer footer with company timeline history milestones footer
Footer Timeline
Fetch pattern JSON:
curl https://webspire.de/patterns/footer/timeline.json timeline.html
<footer class="ws-footer border-t border-[var(--ws-footer-border)] bg-[var(--ws-footer-bg)] py-14">
<div class="mx-auto max-w-6xl px-6">
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--ws-footer-text-muted)]">Our journey</p>
<h2 class="mt-2 text-2xl font-bold text-[var(--ws-footer-text)]">From side project to platform</h2>
<!-- Timeline -->
<ol class="mt-10 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
<li class="relative border-l-2 border-[var(--ws-footer-border)] pl-5 lg:border-l-0 lg:border-t-2 lg:pl-0 lg:pt-5">
<span class="absolute -left-[7px] top-0 h-3 w-3 rounded-full bg-[var(--ws-color-primary)] lg:-top-[7px] lg:left-0" aria-hidden="true"></span>
<p class="font-mono text-sm font-bold text-[var(--ws-color-primary)]">2018</p>
<p class="mt-1 text-sm font-semibold text-[var(--ws-footer-text)]">First commit</p>
<p class="mt-1 text-sm text-[var(--ws-footer-text-muted)]">A weekend prototype becomes a public repo.</p>
</li>
<li class="relative border-l-2 border-[var(--ws-footer-border)] pl-5 lg:border-l-0 lg:border-t-2 lg:pl-0 lg:pt-5">
<span class="absolute -left-[7px] top-0 h-3 w-3 rounded-full bg-[var(--ws-color-primary)] lg:-top-[7px] lg:left-0" aria-hidden="true"></span>
<p class="font-mono text-sm font-bold text-[var(--ws-color-primary)]">2021</p>
<p class="mt-1 text-sm font-semibold text-[var(--ws-footer-text)]">1,000 users</p>
<p class="mt-1 text-sm text-[var(--ws-footer-text-muted)]">The first team plan ships and the company is founded.</p>
</li>
<li class="relative border-l-2 border-[var(--ws-footer-border)] pl-5 lg:border-l-0 lg:border-t-2 lg:pl-0 lg:pt-5">
<span class="absolute -left-[7px] top-0 h-3 w-3 rounded-full bg-[var(--ws-color-primary)] lg:-top-[7px] lg:left-0" aria-hidden="true"></span>
<p class="font-mono text-sm font-bold text-[var(--ws-color-primary)]">2023</p>
<p class="mt-1 text-sm font-semibold text-[var(--ws-footer-text)]">Series A</p>
<p class="mt-1 text-sm text-[var(--ws-footer-text-muted)]">Funding fuels a global team across nine countries.</p>
</li>
<li class="relative border-l-2 border-[var(--ws-color-primary)] pl-5 lg:border-l-0 lg:border-t-2 lg:pl-0 lg:pt-5">
<span class="absolute -left-[7px] top-0 h-3 w-3 rounded-full bg-[var(--ws-color-primary)] ring-4 ring-[var(--ws-color-primary-soft)] lg:-top-[7px] lg:left-0" aria-hidden="true"></span>
<p class="font-mono text-sm font-bold text-[var(--ws-color-primary)]">Today</p>
<p class="mt-1 text-sm font-semibold text-[var(--ws-footer-text)]">Trusted everywhere</p>
<p class="mt-1 text-sm text-[var(--ws-footer-text-muted)]">Powering teams in more than 40,000 organizations.</p>
</li>
</ol>
<!-- Bottom bar -->
<div class="mt-12 flex flex-col items-center justify-between gap-3 border-t border-[var(--ws-footer-border)] pt-6 sm:flex-row">
<p class="text-sm text-[var(--ws-footer-text-muted)]">© 2026 Webspire. All rights reserved.</p>
<nav aria-label="Footer" class="flex gap-5 text-sm">
<a href="#about" class="text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">About</a>
<a href="#careers" class="text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Careers</a>
<a href="#press" class="text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Press</a>
</nav>
</div>
</div>
</footer>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
footertimelinehistorymilestonesstoryabout
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Eyebrow and section title. |
| milestones | Yes | Ordered list of year/milestone entries. |
| bottom | Yes | Copyright and secondary links. |
Timeline footer in the Footer family. Closes the page with a brand history — year markers and milestones on a responsive horizontal/vertical timeline — instead of a link grid.