Alumni Network Showcase

Careers32: Alumni Network Showcase

A centered section header (optional badge, <strong>-aware heading, and description) above a responsive one-to-three-column grid of alumni cards, each pairing an avatar (image or initials fallback) and previous role with an arrow-prefixed line reading currentRole at currentCompany.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/careers32?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/careers32?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/careers32.tsx, plus the badge and avatar shadcn/ui primitives it uses for the eyebrow badge and the per-alumni avatar with its initials fallback.

Quick start

The installed file exports careers32Demo alongside the block: the exact props behind the preview above. Spread it to get a working alumni grid in one line.

import { Careers32, careers32Demo } from "@/components/beste/block/careers32";

export default function AlumniPage() {
  return <Careers32 {...careers32Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Careers32 } from "@/components/beste/block/careers32";

export default function AlumniPage() {
  return (
    <Careers32
      badge={{ label: "Alumni Network", variant: "secondary" }}
      heading="Where they are <strong>now</strong>"
      description="Our alumni lead teams at some of the most innovative companies in the world."
      items={[
        {
          name: "Sarah Park",
          avatar: { src: "/alumni/sarah.jpg", alt: "Sarah Park" },
          previousRole: "Software Engineer",
          currentRole: "Engineering Manager",
          currentCompany: "Stripe",
        },
      ]}
    />
  );
}

Props

type AlumniItem = {
  name: string;
  avatar?: { src: string; alt: string };
  previousRole: string;
  currentRole: string;
  currentCompany: string;
};

Behavior notes

• The entire header block (badge, heading, description) is conditionally rendered: the wrapping <div> only appears when at least one of badge, heading, or description is truthy.
• heading is injected via dangerouslySetInnerHTML, so inline <strong> is honored and styled text-primary; any markup you pass is rendered as raw HTML.
• Each avatar renders AvatarImage only when item.avatar is present; otherwise the AvatarFallback shows initials computed by splitting name on spaces and taking the first character of each part, so a single-word name yields one initial.
• Cards are keyed by array index, not by a stable id, so reordering or filtering items can confuse React's reconciliation.
• The grid is fixed at one column on mobile, sm:grid-cols-2, and lg:grid-cols-3; there is no prop to change the column count.
• The block is purely presentational: no callbacks, no internal state, and the alumni cards and current-role lines are static (not links or interactive).