Hiring Manager Profiles

Careers36: Hiring Manager Profiles

A centered header (optional badge, <strong>-aware heading, and description) above a two-column card grid of team leaders, where each card renders a 4:3 cover photo that scales on hover plus the leader's name, role, an outline department badge, and bio.

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/careers36?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/careers36.tsx, plus the badge shadcn/ui primitive it uses for the header eyebrow badge and the per-card department badge.

Quick start

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

import { Careers36, careers36Demo } from "@/components/beste/block/careers36";

export default function Page() {
  return <Careers36 {...careers36Demo} />;
}

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

import { Careers36 } from "@/components/beste/block/careers36";

export default function Page() {
  return (
    <Careers36
      badge={{ label: "Meet Your Leaders", variant: "secondary" }}
      heading="Meet your <strong>future leaders</strong>"
      description="Get to know the hiring managers and team leads you'd be working with."
      items={[
        {
          name: "James Kim",
          role: "VP of Engineering",
          department: "Engineering",
          bio: "James has 15 years of experience building high-performance engineering teams.",
          image: { src: "/leaders/james.jpg", alt: "James Kim" },
        },
      ]}
    />
  );
}

Props

type LeaderItem = {
  name: string;
  role?: string;
  department?: string;
  bio?: string;
  image?: { src: string; alt: string };
};

Behavior notes

• The entire header block (badge, heading, description) is only rendered when at least one of those three props is truthy, so passing just items produces a bare grid with no header.
• heading is injected via dangerouslySetInnerHTML, and inline <strong> is styled text-primary font-semibold through a [&>strong] selector, so only direct-child <strong> picks up the accent color.
• Each LeaderItem field is individually optional and conditionally rendered: the image wrapper, role, department badge, and bio each render only when their value is present, while name is always shown.
• Cards are keyed by array index, so reordering or filtering items remounts rather than reconciles existing cards.
• The grid is fixed at one column on mobile and two columns from md up (md:grid-cols-2); there is no prop to change the column count.
• The cover image fills a fixed aspect-[4/3] box with object-cover and scales to 1.05 on card hover via the group/careers36 group, a purely decorative effect with no interaction handler.
• The block is presentational only: there are no callbacks, click handlers, or internal state, so cards are not clickable and nothing is wired to navigation.