Course Grid
Grid of course cards
Overview
A simple grid layout for displaying multiple courses. Passes borderRadius, borderColor, and shadow through to each CourseCard. Supports 2, 3, or 4 column layouts.
Usage
import { CourseGrid } from '@leanicon/web-builder-library'Default
Three-column grid with course cards.
Advanced React Patterns
Master compound components, render props, and custom hooks to build scalable React applications.
UX Research Fundamentals
Learn how to conduct user interviews, usability tests, and synthesize research findings.
System Design for Engineers
Deep dive into distributed systems, scalability patterns, and architecture best practices.
Two columns
Four columns
Advanced React Patterns
Master compound components and render props.
UX Research Fundamentals
Conduct user interviews and usability tests.
System Design for Engineers
Distributed systems and scalability patterns.
Introduction to Figma
Get started with Figma for UI design.
With heading and subtitle
Explore Our Courses
Browse our catalog of expert-led courses designed to advance your career.
Advanced React Patterns
Master compound components, render props, and custom hooks.
UX Research Fundamentals
Learn how to conduct user interviews and usability tests.
System Design for Engineers
Deep dive into distributed systems and scalability patterns.
Heading only (no subtitle)
Featured Courses
Advanced React Patterns
Master compound components, render props, and custom hooks.
UX Research Fundamentals
Learn how to conduct user interviews and usability tests.
System Design for Engineers
Deep dive into distributed systems and scalability patterns.
Custom border radius
Custom border color
Sharp corners, no shadow
Dark mode
Featured Courses
Handpicked courses for your learning journey.
Advanced React Patterns
Master compound components, render props, and custom hooks.
UX Research Fundamentals
Learn how to conduct user interviews and usability tests.
System Design for Engineers
Deep dive into distributed systems and scalability patterns.
Two columns — dark mode
Four columns — dark mode
Props
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Array of courses to display (required) |
|
| — | Optional heading above the grid |
|
| — | Optional subtitle below the heading |
|
|
| Number of grid columns |
|
| — | Tailwind border-radius class passed to each card |
|
| — | Tailwind border-color class passed to each card |
|
| — | Tailwind shadow class passed to each card |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
Notes
Coursetype is fromcourse-card— seeCourseCarddocs for the full type definition.borderRadius,borderColor, andshadoware forwarded to everyCourseCardin the grid.- Dark mode: pass
colorScheme="dark"or place inside a.darkancestor.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
heading | string | — | No | |
subtitle | string | — | No | |
courses | Course[] | — | Yes | |
columns | enum | 3 | No | |
borderRadius | string | — | No | |
borderColor | string | — | No | |
shadow | string | — | No | |
colorScheme | enum | — | No | |
className | string | — | No |