cards horizontal grid blog resources cards horizontal landscape row blog resources horizontal card layout side-by-side image and text cards
Horizontal Cards
Fetch pattern JSON:
curl https://webspire.de/patterns/cards/horizontal.json horizontal.html
<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mb-12 text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-cards-text)] sm:text-4xl">What's new</h2>
<p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-cards-text-soft)]">Latest updates and resources from our team.</p>
</div>
<div class="grid gap-6 lg:grid-cols-2">
<article class="group flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition hover:shadow-lg sm:flex-row">
<div class="aspect-[4/3] w-full shrink-0 bg-gradient-to-br from-indigo-100 to-violet-100 sm:aspect-auto sm:w-48 lg:w-56"></div>
<div class="flex flex-1 flex-col justify-center p-6">
<span class="inline-block w-fit rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-700">Guide</span>
<h3 class="mt-2 text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Getting started with design tokens</h3>
<p class="mt-2 text-sm text-[var(--ws-cards-text-soft)]">Learn how to set up and use design tokens to keep your project consistent.</p>
<a href="#" class="mt-4 text-sm font-semibold text-[var(--ws-cards-accent)]">Read more →</a>
</div>
</article>
<article class="group flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition hover:shadow-lg sm:flex-row">
<div class="aspect-[4/3] w-full shrink-0 bg-gradient-to-br from-emerald-100 to-teal-100 sm:aspect-auto sm:w-48 lg:w-56"></div>
<div class="flex flex-1 flex-col justify-center p-6">
<span class="inline-block w-fit rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Tutorial</span>
<h3 class="mt-2 text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Responsive layouts without breakpoints</h3>
<p class="mt-2 text-sm text-[var(--ws-cards-text-soft)]">Use fluid grids and container queries to build layouts that adapt naturally.</p>
<a href="#" class="mt-4 text-sm font-semibold text-[var(--ws-cards-accent)]">Read more →</a>
</div>
</article>
<article class="group flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition hover:shadow-lg sm:flex-row">
<div class="aspect-[4/3] w-full shrink-0 bg-gradient-to-br from-rose-100 to-pink-100 sm:aspect-auto sm:w-48 lg:w-56"></div>
<div class="flex flex-1 flex-col justify-center p-6">
<span class="inline-block w-fit rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-medium text-rose-700">Case Study</span>
<h3 class="mt-2 text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">How we cut load time by 60%</h3>
<p class="mt-2 text-sm text-[var(--ws-cards-text-soft)]">A deep dive into performance optimization with modern CSS and edge caching.</p>
<a href="#" class="mt-4 text-sm font-semibold text-[var(--ws-cards-accent)]">Read more →</a>
</div>
</article>
<article class="group flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition hover:shadow-lg sm:flex-row">
<div class="aspect-[4/3] w-full shrink-0 bg-gradient-to-br from-amber-100 to-orange-100 sm:aspect-auto sm:w-48 lg:w-56"></div>
<div class="flex flex-1 flex-col justify-center p-6">
<span class="inline-block w-fit rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-700">Update</span>
<h3 class="mt-2 text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Tailwind v4 migration guide</h3>
<p class="mt-2 text-sm text-[var(--ws-cards-text-soft)]">Step-by-step instructions for upgrading from v3 to v4 with zero downtime.</p>
<a href="#" class="mt-4 text-sm font-semibold text-[var(--ws-cards-accent)]">Read more →</a>
</div>
</article>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
cardshorizontalgridblogresources
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| cards | Yes | Horizontal cards with image, badge, title, description, link. |
Two-column grid with horizontal cards. Each card shows image on the left, content on the right. Stacks vertically on mobile. Ideal for blog listings, resource libraries, or news feeds.