blog read-next recommendations related articles editorial read-next related recommendations articles blog suggested blog related articles section read next recommendations
Blog Read Next Base
Fetch pattern JSON:
curl https://webspire.de/patterns/blog-read-next/base.json base.html
<section class="ws-blog-read-next ws-read-next border-t border-slate-200 bg-[var(--ws-color-surface)] py-12">
<div class="mx-auto max-w-4xl px-6">
<h2 class="mb-8 text-xl font-bold text-slate-900">Read Next</h2>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Card 1 -->
<a href="#" class="group rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4 transition hover:shadow-md dark:hover:border-slate-600">
<div class="aspect-video overflow-hidden rounded-lg">
<div class="h-full w-full bg-gradient-to-br from-blue-100 to-indigo-200 transition-transform duration-300 group-hover:scale-105 dark:from-blue-900/30 dark:to-indigo-900/30"></div>
</div>
<div class="mt-3 flex 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>
<time>Mar 20</time>
</div>
<h3 class="mt-2 text-sm font-semibold text-slate-900 group-hover:text-blue-600 dark:group-hover:text-blue-400">Component Architecture Best Practices</h3>
<p class="mt-1 text-xs text-slate-500 line-clamp-2">How to structure reusable UI patterns for maximum flexibility and maintainability.</p>
</a>
<!-- Card 2 -->
<a href="#" class="group rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4 transition hover:shadow-md dark:hover:border-slate-600">
<div class="aspect-video overflow-hidden rounded-lg">
<div class="h-full w-full bg-gradient-to-br from-emerald-100 to-teal-200 transition-transform duration-300 group-hover:scale-105 dark:from-emerald-900/30 dark:to-teal-900/30"></div>
</div>
<div class="mt-3 flex 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">CSS</span>
<span>·</span>
<time>Mar 18</time>
</div>
<h3 class="mt-2 text-sm font-semibold text-slate-900 group-hover:text-blue-600 dark:group-hover:text-blue-400">Modern CSS Techniques for 2026</h3>
<p class="mt-1 text-xs text-slate-500 line-clamp-2">Container queries, :has() selector, and scroll-driven animations you should know.</p>
</a>
<!-- Card 3 -->
<a href="#" class="group rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4 transition hover:shadow-md dark:hover:border-slate-600 sm:col-span-2 lg:col-span-1">
<div class="aspect-video overflow-hidden rounded-lg">
<div class="h-full w-full bg-gradient-to-br from-amber-100 to-orange-200 transition-transform duration-300 group-hover:scale-105 dark:from-amber-900/30 dark:to-orange-900/30"></div>
</div>
<div class="mt-3 flex 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>
<time>Mar 15</time>
</div>
<h3 class="mt-2 text-sm font-semibold text-slate-900 group-hover:text-blue-600 dark:group-hover:text-blue-400">Building with Tailwind v4</h3>
<p class="mt-1 text-xs text-slate-500 line-clamp-2">A hands-on guide to the new CSS-first configuration and @theme directive.</p>
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
blogread-nextrecommendationsrelatedarticleseditorial
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title like "Read Next". |
| cards | Yes | Post recommendation cards with thumbnail and metadata. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| columns | '2' | '3' | 3 | Number of recommendation cards. |