Course Card
Course preview card
Overview
Displays course information in a card layout. When href is provided, the entire card is wrapped in an anchor tag. Supports custom border radius, border color, and shadow via Tailwind class props.
Usage
import { CourseCard } from '@leanicon/web-builder-library'Default
Card with image, category, level, duration, and price.
With instructor
Add instructor to show an avatar, name, and title below the description.
With tags
Add tags to render badge pills below the description.
Without image
Card renders without the hero image when image is omitted.
Instructor without avatar
When avatar is omitted, initials are shown as fallback.
UX Research Fundamentals
Learn how to conduct user interviews and usability tests.
Minimal
Only the required title — no image, description, badges, instructor, or footer.
Introduction to CSS Grid
Free course (no duration)
Getting Started with TypeScript
A quick introduction to TypeScript for JavaScript developers.
Custom border radius
Pass a Tailwind border-radius class via borderRadius.
Custom border color
Pass a Tailwind border-color class via borderColor.
Custom shadow
Pass a Tailwind shadow class via shadow.
Sharp corners, no shadow
Dark mode
With instructor — dark mode
With tags — dark mode
Minimal — dark mode
Introduction to CSS Grid
Instructor without avatar — dark mode
UX Research Fundamentals
Learn how to conduct user interviews and usability tests.
Props
CourseCard
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Course data object (required) |
|
| — | Tailwind border-radius class (e.g. |
|
| — | Tailwind border-color class (e.g. |
|
| — | Tailwind shadow class (e.g. |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
Course
Field | Type | Description |
|---|---|---|
|
| Course title (required) |
|
| Short description (clamped to 2 lines) |
|
| Hero image |
|
| Link destination — wraps entire card in anchor |
|
| Instructor info with avatar fallback |
|
| Duration text (e.g. |
|
| Level badge (e.g. |
|
| Category badge |
|
| Tag badges below description |
|
| Price text (e.g. |
CourseInstructor
Field | Type | Description |
|---|---|---|
|
| Instructor name (required) |
|
| Avatar image — initials shown as fallback |
|
| Role/title beneath the name |
Notes
course.hrefmakes the entire card a clickable link; without it the card is non-interactive.categoryandlevelrender as badges above the title.tagsrender as outline badges below the description.- Instructor initials are derived from the first letter of each word in the name (max 2 characters).
borderRadius,borderColor, andshadowaccept any Tailwind utility class for full customization.- Dark mode: pass
colorScheme="dark"or place inside a.darkancestor.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
course | Course | — | Yes | |
borderRadius | string | — | No | Tailwind border-radius class, e.g. "", "" |
borderColor | string | — | No | Tailwind border-color class, e.g. "border-primary", "border-red-500" |
shadow | string | — | No | Tailwind shadow class, e.g. "shadow-lg", "shadow-none" |
colorScheme | enum | — | No | |
className | string | — | No |