Alumni Story Cards

Installation

pnpm dlx shadcn@latest add @cleverui/alumni-story-cards

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

Usage

tsx

import { AlumniStoryCards } from '@/components/blocks/alumni-story-cards'

Exampletsx

import { AlumniStoryCards } from '@/components/blocks/alumni-story-cards'

export default function AlumniStoryCardsDemo() {
  return (
    <div className="mx-auto w-full">
      <AlumniStoryCards
        heading="Where our alumni landed"
        intro="Real graduates, real job titles, every arc here happened within a year of finishing."
        stories={[
          {
            name: 'Priya Nair',
            fromJobTitle: 'Barista, Harbour Roast',
            toJobTitle: 'Junior data analyst',
            company: 'Northline Transit',
            quote:
              'I thought I needed a degree first. Eight weeks later I was shipping weekly ridership reports the ops team actually opens.',
            cohort: 'Class of 2025',
            timeline: 'Hired 6 weeks after demo day',
          },
          {
            name: 'Marcus Webb',
            fromJobTitle: 'Warehouse shift lead',
            toJobTitle: 'Operations analyst',
            company: 'ParcelPath Logistics',
            quote:
              'The project forced me to talk to stakeholders early. That habit got me the interview more than any tool on my resume.',
            cohort: 'Class of 2024',
            timeline: 'Hired 3 months after graduation',
          },
          {
            name: 'Elena Rossi',
            fromJobTitle: 'Primary school teacher',
            toJobTitle: 'Product analyst',
            company: 'Lumen EdTech',
            quote:
              'I already knew how to explain hard things simply. The course gave me the metrics vocabulary to sit next to engineers.',
            cohort: 'Class of 2025',
            timeline: 'Hired 9 weeks after demo day',
          },
          {
            name: 'James Okonkwo',
            fromJobTitle: 'Freelance photographer',
            toJobTitle: 'Growth analyst',
            company: 'Frame & Field',
            quote:
              'I used to guess which shoots brought clients back. Now I can show the funnel, and price my work like a business.',
            cohort: 'Class of 2024',
            timeline: 'Hired 4 months after graduation',
          },
        ]}
      />
    </div>
  )
}

API reference

AlumniStoryCards accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Where our alumni landed'`	–
`intro`	`string`	–	one warm plain sentence under the heading
`stories`*	`AlumniStory[]`	–	–
`columns`	`1 \| 2`	`2`	cards per row at sm and up; always 1 below

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

Referenced types

Typestsx

export interface AlumniStory {
  name: string
  fromJobTitle: string
  toJobTitle: string
  company?: string
  quote: string
  /** preformatted, e.g. 'Class of 2025' */
  cohort?: string
  /** preformatted, e.g. 'Hired 6 weeks after demo day' */
  timeline?: string
}

Related components

Student Outcomes Band

Outcome stats in the encouraging register, completion rate, career switches, and salary delta tick up once, each with a plain-language caption instead of a mono label.

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.

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.

Course Card Grid

Friendly course cards with level chips, duration and next-cohort lines, outcome checklists, and one warm enrol CTA per card, the encouraging way a training site earns sign-ups.

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.

Frequently asked questions

How do I install the Alumni Story Cards component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/alumni-story-cards`. 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 Alumni Story Cards require?

Alumni Story Cards 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 Alumni Story Cards 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