blog timeline archive chronological editorial sticky date blog-timeline archive chronological date-badge sticky editorial chronological blog archive timeline-style blog listing
Blog Timeline Base
Fetch pattern JSON:
curl https://webspire.de/patterns/blog-timeline/base.json base.html
<section class="ws-blog-timeline mx-auto max-w-3xl px-6 py-16">
<h2 class="mb-12 text-3xl font-bold text-slate-900">
Archive
</h2>
<div class="relative">
<!-- Vertical connector -->
<div
class="absolute left-[3.25rem] top-0 h-full w-px bg-slate-200 sm:left-[4rem]"
></div>
<!-- Entry with sticky date -->
<article class="relative mb-10 flex gap-6">
<div
class="sticky top-20 z-10 flex h-14 w-14 shrink-0 flex-col items-center justify-center rounded-xl bg-[var(--ws-color-surface)] text-center shadow-sm ring-1 ring-slate-200 sm:h-16 sm:w-16"
>
<span
class="text-lg font-bold leading-none text-slate-900"
>22</span
>
<span
class="text-[10px] font-medium uppercase tracking-wider text-slate-400"
>Mar</span
>
</div>
<div
class="flex-1 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 shadow-sm"
>
<div class="flex flex-wrap items-center gap-2 text-xs text-slate-400">
<span
class="rounded-full bg-blue-100 px-2 py-0.5 font-medium text-blue-700"
>Design</span
>
<span>·</span>
<span>5 min read</span>
</div>
<h3 class="mt-2 text-lg font-semibold text-slate-900">
<a
href="#"
class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
>Building a Tailwind Pattern Registry</a
>
</h3>
<p class="mt-2 text-sm text-slate-600">
How we structured a growing pattern library into a searchable,
copy-paste-ready registry with family-based governance.
</p>
<div class="mt-3 flex items-center gap-2">
<div class="h-6 w-6 rounded-full bg-slate-300"></div>
<span class="text-xs font-medium text-slate-700"
>Sarah Chen</span
>
</div>
</div>
</article>
<!-- Entry -->
<article class="relative mb-10 flex gap-6">
<div
class="sticky top-20 z-10 flex h-14 w-14 shrink-0 flex-col items-center justify-center rounded-xl bg-[var(--ws-color-surface)] text-center shadow-sm ring-1 ring-slate-200 sm:h-16 sm:w-16"
>
<span
class="text-lg font-bold leading-none text-slate-900"
>18</span
>
<span
class="text-[10px] font-medium uppercase tracking-wider text-slate-400"
>Mar</span
>
</div>
<div
class="flex-1 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 shadow-sm"
>
<div class="flex flex-wrap items-center gap-2 text-xs text-slate-400">
<span
class="rounded-full bg-emerald-100 px-2 py-0.5 font-medium text-emerald-700"
>Engineering</span
>
<span>·</span>
<span>8 min read</span>
</div>
<h3 class="mt-2 text-lg font-semibold text-slate-900">
<a
href="#"
class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
>CSS-Only Effects Tailwind Can't Do</a
>
</h3>
<p class="mt-2 text-sm text-slate-600">
A deep dive into aurora gradients, glass effects, and scroll-linked
animations that require custom CSS.
</p>
<div
class="mt-3 h-40 rounded-lg bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-600"
></div>
<div class="mt-3 flex items-center gap-2">
<div class="h-6 w-6 rounded-full bg-slate-400"></div>
<span class="text-xs font-medium text-slate-700"
>Alex Rivera</span
>
</div>
</div>
</article>
<!-- Entry -->
<article class="relative mb-10 flex gap-6">
<div
class="sticky top-20 z-10 flex h-14 w-14 shrink-0 flex-col items-center justify-center rounded-xl bg-[var(--ws-color-surface)] text-center shadow-sm ring-1 ring-slate-200 sm:h-16 sm:w-16"
>
<span
class="text-lg font-bold leading-none text-slate-900"
>12</span
>
<span
class="text-[10px] font-medium uppercase tracking-wider text-slate-400"
>Mar</span
>
</div>
<div
class="flex-1 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 shadow-sm"
>
<div class="flex flex-wrap items-center gap-2 text-xs text-slate-400">
<span
class="rounded-full bg-amber-100 px-2 py-0.5 font-medium text-amber-700"
>Tutorial</span
>
<span>·</span>
<span>3 min read</span>
</div>
<h3 class="mt-2 text-lg font-semibold text-slate-900">
<a
href="#"
class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
>Getting Started with Webspire CLI</a
>
</h3>
<p class="mt-2 text-sm text-slate-600">
Install, browse, and add patterns to your project in under two
minutes.
</p>
</div>
</article>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
blogtimelinearchivechronologicaleditorialstickydate
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Archive page title. |
| entries | Yes | Blog post entries with date badge, metadata, title, excerpt. |
| dateBadge | Yes | Sticky date badge with day and month. |