category grid navigation browse icon cards category grid browse icon navigation topics cards browse categories grid category navigation cards with icons topic overview grid
Category Grid Base
Fetch pattern JSON:
curl https://webspire.de/patterns/category-grid/base.json base.html
<section class="ws-category-grid bg-[var(--ws-color-surface)]" aria-label="Browse categories">
<div class="mx-auto max-w-5xl px-4 py-16 sm:py-24">
<div class="text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Browse Categories</h2>
<p class="mt-2 text-lg text-gray-600">Explore topics that match your interests and career goals.</p>
</div>
<div class="mt-12 grid grid-cols-2 gap-4 sm:gap-6 lg:grid-cols-3">
<!-- Code -->
<a href="#code" class="group flex flex-col items-center rounded-xl border border-gray-200 px-4 py-8 transition hover:border-indigo-300 hover:shadow-md">
<div class="flex h-14 w-14 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 transition group-hover:bg-indigo-600 group-hover:text-white">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" /></svg>
</div>
<h3 class="mt-4 text-sm font-semibold text-gray-900">Development</h3>
<p class="mt-1 text-xs text-gray-500">42 courses</p>
</a>
<!-- Design -->
<a href="#design" class="group flex flex-col items-center rounded-xl border border-gray-200 px-4 py-8 transition hover:border-rose-300 hover:shadow-md">
<div class="flex h-14 w-14 items-center justify-center rounded-full bg-rose-100 text-rose-600 transition group-hover:bg-rose-600 group-hover:text-white">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128m0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" /></svg>
</div>
<h3 class="mt-4 text-sm font-semibold text-gray-900">Design</h3>
<p class="mt-1 text-xs text-gray-500">38 courses</p>
</a>
<!-- Business -->
<a href="#business" class="group flex flex-col items-center rounded-xl border border-gray-200 px-4 py-8 transition hover:border-emerald-300 hover:shadow-md">
<div class="flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 transition group-hover:bg-emerald-600 group-hover:text-white">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
</div>
<h3 class="mt-4 text-sm font-semibold text-gray-900">Business</h3>
<p class="mt-1 text-xs text-gray-500">31 courses</p>
</a>
<!-- Marketing -->
<a href="#marketing" class="group flex flex-col items-center rounded-xl border border-gray-200 px-4 py-8 transition hover:border-amber-300 hover:shadow-md">
<div class="flex h-14 w-14 items-center justify-center rounded-full bg-amber-100 text-amber-600 transition group-hover:bg-amber-600 group-hover:text-white">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46" /></svg>
</div>
<h3 class="mt-4 text-sm font-semibold text-gray-900">Marketing</h3>
<p class="mt-1 text-xs text-gray-500">24 courses</p>
</a>
<!-- Photography -->
<a href="#photography" class="group flex flex-col items-center rounded-xl border border-gray-200 px-4 py-8 transition hover:border-sky-300 hover:shadow-md">
<div class="flex h-14 w-14 items-center justify-center rounded-full bg-sky-100 text-sky-600 transition group-hover:bg-sky-600 group-hover:text-white">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" /></svg>
</div>
<h3 class="mt-4 text-sm font-semibold text-gray-900">Photography</h3>
<p class="mt-1 text-xs text-gray-500">19 courses</p>
</a>
<!-- Music -->
<a href="#music" class="group flex flex-col items-center rounded-xl border border-gray-200 px-4 py-8 transition hover:border-violet-300 hover:shadow-md">
<div class="flex h-14 w-14 items-center justify-center rounded-full bg-violet-100 text-violet-600 transition group-hover:bg-violet-600 group-hover:text-white">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z" /></svg>
</div>
<h3 class="mt-4 text-sm font-semibold text-gray-900">Music</h3>
<p class="mt-1 text-xs text-gray-500">15 courses</p>
</a>
</div>
</div>
</section>
Details
Responsive Tailwind Only SSR Safe Copy & Paste
Stable Published
categorygridnavigationbrowseiconcards
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| cards | Yes | Grid of category cards with icon, name, and count. |
A responsive grid of six category cards (2 columns mobile, 3 columns desktop). Each card is a clickable <a> element featuring a centered icon inside a colored circle, the category name, and an item count in muted text. Cards have rounded-xl corners, border, and hover effects (border color change, shadow, icon circle color inversion). Six distinct categories: Development, Design, Business, Marketing, Photography, Music — each with its own accent color and Heroicon SVG.