blog carousel scroll-snap featured rail blog carousel scroll-snap featured rail horizontal articles featured article carousel without JavaScript horizontally scrolling blog cards
Blog Scroll Carousel
Fetch pattern JSON:
curl https://webspire.de/patterns/blog/carousel.json carousel.html
<section class="ws-blog bg-[var(--ws-blog-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
<div class="max-w-2xl">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]">Featured Rail</p>
<h2 class="mt-3 text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl">Highlighted reads</h2>
<p class="mt-3 text-base text-[var(--ws-blog-text-soft)]">A horizontal rail for curated stories, powered by native CSS scroll snap.</p>
</div>
<div class="text-sm text-[var(--ws-blog-text-muted)]">Swipe or trackpad-scroll</div>
</div>
<div class="-mx-6 mt-10 overflow-x-auto px-6 pb-2 [scrollbar-width:none]">
<div class="flex gap-5 snap-x snap-mandatory [&::-webkit-scrollbar]:hidden">
<article class="group w-[min(320px,82vw)] flex-none snap-start">
<a href="#" class="block">
<div class="aspect-square overflow-hidden rounded-[1.35rem] bg-[var(--ws-blog-card-bg)]">
<div class="h-full w-full bg-gradient-to-br from-indigo-100 to-purple-100 transition duration-300 group-hover:scale-105"></div>
</div>
<div class="mt-4">
<span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Registry</span>
<h3 class="mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Wie eine Registry fuer Menschen und Agents gleichermassen lesbar wird</h3>
<div class="mt-2 text-sm text-[var(--ws-blog-text-muted)]">21. Maerz 2026 · 9 Min</div>
</div>
</a>
</article>
<article class="group w-[min(320px,82vw)] flex-none snap-start">
<a href="#" class="block">
<div class="aspect-square overflow-hidden rounded-[1.35rem] bg-[var(--ws-blog-card-bg)]">
<div class="h-full w-full bg-gradient-to-br from-emerald-100 to-teal-100 transition duration-300 group-hover:scale-105"></div>
</div>
<div class="mt-4">
<span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Effects</span>
<h3 class="mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Scroll-, Hover- und Lighting-Demos richtig visualisieren</h3>
<div class="mt-2 text-sm text-[var(--ws-blog-text-muted)]">18. Maerz 2026 · 6 Min</div>
</div>
</a>
</article>
<article class="group w-[min(320px,82vw)] flex-none snap-start">
<a href="#" class="block">
<div class="aspect-square overflow-hidden rounded-[1.35rem] bg-[var(--ws-blog-card-bg)]">
<div class="h-full w-full bg-gradient-to-br from-amber-100 to-orange-100 transition duration-300 group-hover:scale-105"></div>
</div>
<div class="mt-4">
<span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Content</span>
<h3 class="mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Startseiten so schreiben, dass die Anwendung sofort verstanden wird</h3>
<div class="mt-2 text-sm text-[var(--ws-blog-text-muted)]">13. Maerz 2026 · 7 Min</div>
</div>
</a>
</article>
<article class="group w-[min(320px,82vw)] flex-none snap-start">
<a href="#" class="block">
<div class="aspect-square overflow-hidden rounded-[1.35rem] bg-[var(--ws-blog-card-bg)]">
<div class="h-full w-full bg-gradient-to-br from-sky-100 to-cyan-100 transition duration-300 group-hover:scale-105"></div>
</div>
<div class="mt-4">
<span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Workflow</span>
<h3 class="mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Wie man aus einem TODO echte Registry-Inhalte macht</h3>
<div class="mt-2 text-sm text-[var(--ws-blog-text-muted)]">9. Maerz 2026 · 5 Min</div>
</div>
</a>
</article>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
blogcarouselscroll-snapfeaturedrail
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Optional heading and intro. |
| posts | Yes | Featured cards rendered in a horizontal scroll-snap row. |
Native scroll-snap blog rail for a handful of highlighted stories. It works well near the top of a page when you want a more tactile featured section without committing to a full magazine layout.