Course Card Grid

Installation

pnpm dlx shadcn@latest add @cleverui/course-card-grid

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { CourseCardGrid } from '@/components/blocks/course-card-grid'

Exampletsx

import { CourseCardGrid } from '@/components/blocks/course-card-grid'

export default function CourseCardGridDemo() {
  return (
    <div className="mx-auto w-full">
      <CourseCardGrid
        heading="Find your course"
        intro="Pick a path that matches where you are, each cohort ships a project you can show an employer."
        courses={[
          {
            title: 'Foundations of Data',
            level: 'Beginner',
            blurb:
              'Spreadsheets to first SQL queries. Build the habits that keep messy data from derailing your week.',
            duration: '6 weeks',
            nextCohort: 'Next cohort starts 4 Aug',
            outcomes: [
              'Clean and shape tables with confidence',
              'Write readable SQL for common reports',
              'Present findings in a short deck',
            ],
            enrolHref: '#foundations',
            enrolLabel: 'Enrol now',
          },
          {
            title: 'Product Analytics Lab',
            level: 'Intermediate',
            blurb:
              'Turn product events into decisions. Measure funnels, retention, and experiments without drowning in dashboards.',
            duration: '8 weeks',
            nextCohort: 'Next cohort starts 18 Aug',
            outcomes: [
              'Design event schemas teams will use',
              'Build a weekly metrics review ritual',
              'Ship a funnel teardown on real data',
            ],
            enrolHref: '#analytics',
          },
          {
            title: 'ML Engineering Studio',
            level: 'Advanced',
            blurb:
              'Take a trained model from notebook to reliable service, monitoring, rollbacks, and honest evaluation.',
            duration: '10 weeks',
            nextCohort: 'Next cohort starts 1 Sep',
            outcomes: [
              'Package models for production deploy',
              'Set drift and latency alerts',
              'Document trade-offs for stakeholders',
            ],
            enrolHref: '#ml-studio',
            enrolLabel: 'Join the waitlist',
          },
        ]}
      />
    </div>
  )
}

API reference

CourseCardGrid accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Find your course'`	–
`intro`	`string`	–	one encouraging plain-language sentence under the heading
`courses`*	`CourseCard[]`	–	–
`enrolLabel`	`string`	`'Enrol now'`	fallback CTA label when a course omits its own
`outcomesLabel`	`string`	`"What you'll learn"`	–

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface CourseCard {
  title: string
  /** short word: Beginner / Intermediate / Advanced */
  level: string
  blurb?: string
  /** preformatted, e.g. '6 weeks', never derived from Date */
  duration: string
  /** preformatted, e.g. 'Next cohort starts 4 Aug' */
  nextCohort?: string
  outcomes: string[]
  enrolHref?: string
  enrolLabel?: string
}

Related components

Cohort Countdown Strip

An enrolment-closing strip, seats left, a preformatted close date, and a compact rolling countdown pointing at one warm CTA. Encouraging urgency, not a fire alarm.

Admission Checklist

What you need to get in and what you can skip, admission requirements as an encouraging two-group checklist with real dl semantics. React and Tailwind block for course sites.

Alumni Story Cards

Graduate stories told as career arcs, from old job to new title, a short quote, cohort chip, and hired-in timeline. React and Tailwind alumni proof cards for course sites.

Curriculum Outline

A module-by-module curriculum accordion, week markers, lesson counts, and honest 'what you'll build' notes behind real disclosure semantics. A syllabus students can trust.

Parents FAQ

The questions parents and skeptics actually ask, accreditation, refunds, job outcomes, answered plainly behind real disclosure semantics, with a talk-to-a-human fallback.

Instructor Panel

Educator bios that read like a good syllabus, plain-text credentials, an approachable register, and student-count tickers that prove the teaching miles without bragging.

Frequently asked questions

How do I install the Course Card Grid component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/course-card-grid`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Course Card Grid require?

Course Card Grid uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Course Card Grid to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code