course card education rating pricing instructor badge course card rating stars instructor avatar badge price education grid course listing cards with ratings education platform course grid product cards with instructor and price
Course Card Base
Fetch pattern JSON:
curl https://webspire.de/patterns/course-card/base.json base.html
<section class="ws-course-card bg-[var(--ws-color-surface)]" aria-label="Popular courses">
<div class="mx-auto max-w-6xl 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">Popular Courses</h2>
<p class="mt-2 text-lg text-gray-600">Level up your skills with our most enrolled programs.</p>
</div>
<div class="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Course 1 -->
<article class="group overflow-hidden rounded-xl border border-gray-200 shadow-sm transition hover:shadow-lg">
<div class="aspect-video bg-gradient-to-br from-indigo-500 to-purple-600"></div>
<div class="p-5">
<span class="inline-block rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-semibold text-indigo-700">Web Development</span>
<h3 class="mt-3 text-lg font-bold text-gray-900 group-hover:text-indigo-600">Modern Frontend with Astro & Tailwind</h3>
<p class="mt-1.5 line-clamp-2 text-sm text-gray-600">Build blazing-fast websites using Astro's island architecture and Tailwind CSS utility-first approach.</p>
<div class="mt-4 flex items-center justify-between border-t border-gray-100 pt-4">
<div class="flex items-center gap-2">
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white" aria-hidden="true">SM</span>
<span class="text-sm text-gray-700">Sarah Mitchell</span>
</div>
<div class="text-right">
<div class="flex items-center gap-1 text-xs text-amber-500" aria-label="4.8 out of 5 stars">
<span aria-hidden="true">★★★★☆</span>
<span class="text-gray-500">(2,847)</span>
</div>
<div class="mt-0.5">
<span class="text-sm font-bold text-gray-900">$49</span>
<span class="ml-1 text-xs text-gray-400 line-through">$89</span>
</div>
</div>
</div>
</div>
</article>
<!-- Course 2 -->
<article class="group overflow-hidden rounded-xl border border-gray-200 shadow-sm transition hover:shadow-lg">
<div class="aspect-video bg-gradient-to-br from-emerald-500 to-teal-600"></div>
<div class="p-5">
<span class="inline-block rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">Data Science</span>
<h3 class="mt-3 text-lg font-bold text-gray-900 group-hover:text-emerald-600">Python for Data Analysis</h3>
<p class="mt-1.5 line-clamp-2 text-sm text-gray-600">Master pandas, NumPy, and matplotlib to transform raw data into actionable business insights.</p>
<div class="mt-4 flex items-center justify-between border-t border-gray-100 pt-4">
<div class="flex items-center gap-2">
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-600 text-xs font-bold text-white" aria-hidden="true">JC</span>
<span class="text-sm text-gray-700">James Chen</span>
</div>
<div class="text-right">
<div class="flex items-center gap-1 text-xs text-amber-500" aria-label="4.9 out of 5 stars">
<span aria-hidden="true">★★★★★</span>
<span class="text-gray-500">(4,102)</span>
</div>
<div class="mt-0.5">
<span class="text-sm font-bold text-gray-900">$59</span>
<span class="ml-1 text-xs text-gray-400 line-through">$119</span>
</div>
</div>
</div>
</div>
</article>
<!-- Course 3 -->
<article class="group overflow-hidden rounded-xl border border-gray-200 shadow-sm transition hover:shadow-lg">
<div class="aspect-video bg-gradient-to-br from-rose-500 to-pink-600"></div>
<div class="p-5">
<span class="inline-block rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-semibold text-rose-700">UX Design</span>
<h3 class="mt-3 text-lg font-bold text-gray-900 group-hover:text-rose-600">UX Research & Design Thinking</h3>
<p class="mt-1.5 line-clamp-2 text-sm text-gray-600">Learn user research methods, wireframing, prototyping, and usability testing from industry practitioners.</p>
<div class="mt-4 flex items-center justify-between border-t border-gray-100 pt-4">
<div class="flex items-center gap-2">
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-rose-600 text-xs font-bold text-white" aria-hidden="true">AL</span>
<span class="text-sm text-gray-700">Anna Larsson</span>
</div>
<div class="text-right">
<div class="flex items-center gap-1 text-xs text-amber-500" aria-label="4.7 out of 5 stars">
<span aria-hidden="true">★★★★☆</span>
<span class="text-gray-500">(1,563)</span>
</div>
<div class="mt-0.5">
<span class="text-sm font-bold text-gray-900">$39</span>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</section>
Details
Responsive Tailwind Only SSR Safe Copy & Paste
Stable Published
coursecardeducationratingpricinginstructorbadge
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| cards | Yes | Grid of course cards with image, metadata, and pricing. |
Three course cards in a responsive grid. Each card features an aspect-video gradient placeholder, a category badge, title, two-line description, and a footer row with instructor avatar (initials circle) + name on the left and star rating + student count + price on the right. Cards have rounded-xl corners, border, shadow-sm, and hover:shadow-lg transition.