Employee Spotlight Story

Careers22: Employee Spotlight Story

A single-employee spotlight section that pairs a portrait image in a 3:4 frame with a name, role, a left-bordered italic pull quote, and a stacked list of year/role career milestones, all under an optional centered badge, heading, and description block.

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

Base UI flavor

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

This installs the block to components/beste/block/careers22.tsx, plus the badge shadcn/ui primitive it uses for the section eyebrow badge.

Quick start

The installed file exports careers22Demo alongside the block: the exact props behind the preview above. Spread it to get a working employee spotlight in one line.

import { Careers22, careers22Demo } from "@/components/beste/block/careers22";

export default function Page() {
  return <Careers22 {...careers22Demo} />;
}

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

import { Careers22 } from "@/components/beste/block/careers22";

export default function Page() {
  return (
    <Careers22
      badge={{ label: "Employee Spotlight", variant: "secondary" }}
      heading="Growing with <strong>our team</strong>"
      description="Real stories from people who've built their careers here."
      name="Maria Santos"
      role="Staff Engineer, Platform Team"
      image={{ src: "/team/maria.jpg", alt: "Maria Santos" }}
      quote="The mentorship and trust from leadership gave me the confidence to take on bigger problems."
      milestones={[
        { year: "2023", role: "Junior Software Engineer" },
        { year: "2026", role: "Staff Engineer, Platform Team" },
      ]}
    />
  );
}

Props

type MilestoneItem = {
  year: string;
  role: string;
};

Behavior notes

• The entire header block (badge, heading, description) is only rendered when at least one of badge, heading, or description is present, so omitting all three drops the top margin and centered container entirely.
• heading is injected via dangerouslySetInnerHTML, and any inline <strong> inside it is recolored to text-primary; pass only trusted markup.
• The layout is a two-column grid on lg screens, but the image column only renders when image is provided, so without it the text column stretches full width.
• The name/role sub-block is conditional on name || role, and name and role render independently, so you can show just one of them.
• The quote is wrapped in literal “/” entities in addition to the blockquote; do not add your own surrounding quotation marks to the quote string.
• Milestones use the array index as their React key and render nothing when milestones is empty, so reordering or filtering the list in place can cause reconciliation churn.
• The component is a pure presentational block with no callbacks, internal state, or interactive controls; there is nothing to wire up beyond passing props.