Internship Program

Careers19: Internship Program

A centered internship recruiting section that pairs a badge, <strong>-aware heading, and lead paragraph with a two-column body: a list of icon-fronted highlight rows on the left and a bordered "Program Details" card on the right that stacks label/value rows above a column of full-width CTA buttons.

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

Base UI flavor

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

This installs the block to components/beste/block/careers19.tsx, plus the badge and button shadcn/ui primitives it uses for the eyebrow badge and the CTA buttons in the details card.

Quick start

The installed file exports careers19Demo alongside the block: the exact props behind the preview above. Spread it to get a working internship program section in one line.

import { Careers19, careers19Demo } from "@/components/beste/block/careers19";

export default function Page() {
  return <Careers19 {...careers19Demo} />;
}

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

import { Rocket, Users } from "lucide-react";
import { Careers19 } from "@/components/beste/block/careers19";

export default function Page() {
  return (
    <Careers19
      badge={{ label: "Internship Program", variant: "secondary" }}
      heading="Launch your career with our <strong>internship program</strong>"
      description="A 12-week immersive program working on real products alongside our team."
      highlights={[
        { icon: Rocket, title: "Real Impact", description: "Ship production features used by thousands." },
        { icon: Users, title: "Dedicated Mentorship", description: "Get paired with a senior team member." },
      ]}
      details={[
        { label: "Duration", value: "12 weeks" },
        { label: "Start Date", value: "June 2026" },
      ]}
      buttons={[{ label: "Apply Now", href: "https://beste.co" }]}
    />
  );
}

Props

type HighlightItem = {
  icon?: LucideIcon;
  title: string;
  description?: string;
};

type ProgramDetail = {
  label: string;
  value: string;
};

Behavior notes

• The entire header block (badge, heading, description) only renders when at least one of badge, heading, or description is truthy, so passing none of them collapses that whole region.
• heading is injected via dangerouslySetInnerHTML, and any inline <strong> inside it is styled to text-primary with font-semibold; pass only trusted markup.
• Each highlight always renders its circular bg-primary/10 avatar, but the icon inside is conditional: omit item.icon and the circle renders empty. A highlight's description is likewise optional and simply skipped when absent.
• The layout is a lg:grid-cols-5 grid where highlights take lg:col-span-3 and the details card takes lg:col-span-2; below the lg breakpoint both stack full width.
• The badge and each button default to variant: "default" when their own variant is unset.
• Buttons render only when buttons.length > 0, and each is a Button asChild wrapping a next/link Link to button.href; there is no onClick callback, navigation is pure href.
• The "Program Details" heading is a hardcoded string and is not driven by any prop; only the label/value rows beneath it come from details.