Course Feed
Course listing feed
Overview
Mirrors the BlogFeed pattern but for courses. Displays one featured course in a prominent split layout (image + metadata), followed by a three-column grid of secondary CourseCard items.
Usage
import { CourseFeed } from "@leanicon/web-builder-library";Default
Featured course with image, instructor, tags, and three secondary course cards.
Master deep learning, natural language processing, and computer vision. Build production-ready models and deploy them at scale with best practices from industry experts.
- Data ScienceBeginner
Introduction to Data Science
Learn the fundamentals of data science with hands-on projects.
JSJohn Smith8 weeks$99 - Cloud ComputingIntermediate
Cloud Architecture Fundamentals
Design and deploy scalable cloud solutions on AWS and GCP.
AWSGCPDevOpsAJAlice Johnson10 weeks$149 - Web DevelopmentIntermediate
Full-Stack Web Development Bootcamp
Build modern web applications from scratch using React and Node.js.
ReactNode.jsTypeScriptBWBob Williams16 weeks$179
Sharp corners
Set corners="sharp" to remove border-radius from all images and cards.
Master deep learning, natural language processing, and computer vision.
Custom read-more label
Override the link text via readMoreLabel.
Master deep learning, natural language processing, and computer vision.
Featured only
When courses is empty, only the featured hero section is rendered.
Master deep learning, natural language processing, and computer vision. Build production-ready models and deploy them at scale.
Featured without image
When image is omitted from the featured course, the text column spans the full width.
Master deep learning, natural language processing, and computer vision. Build production-ready models and deploy them at scale.
Minimal
Only the required title on the featured course, no secondary courses.
Dark mode
Master deep learning, natural language processing, and computer vision. Build production-ready models and deploy them at scale with best practices from industry experts.
- Data ScienceBeginner
Introduction to Data Science
Learn the fundamentals of data science with hands-on projects.
JSJohn Smith8 weeks$99 - Cloud ComputingIntermediate
Cloud Architecture Fundamentals
Design and deploy scalable cloud solutions on AWS and GCP.
AWSGCPDevOpsAJAlice Johnson10 weeks$149 - Web DevelopmentIntermediate
Full-Stack Web Development Bootcamp
Build modern web applications from scratch using React and Node.js.
ReactNode.jsTypeScriptBWBob Williams16 weeks$179
Sharp corners — dark mode
Master deep learning, natural language processing, and computer vision.
Featured only — dark mode
Master deep learning, natural language processing, and computer vision. Build production-ready models and deploy them at scale.
Minimal — dark mode
Props
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | The prominent hero course (required) |
|
| — | Secondary courses shown in the grid (required) |
|
|
| Text for the read-more link on the featured course |
|
|
| Image and card border-radius style |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
Notes
Courseis the same type used byCourseCard— import fromcourse-card.- When
imageis omitted from the featured course, the text column spans the full width. - When
coursesis empty, only the featured hero section is rendered. corners="sharp"propagates to both the featured image and theCourseCardgrid items.- Dark mode: pass
colorScheme="dark"or place inside a.darkancestor.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
featuredCourse | Course | — | Yes | |
courses | Course[] | — | Yes | |
readMoreLabel | string | View course | No | |
corners | enum | rounded | No | |
colorScheme | enum | — | No | |
className | string | — | No |