HR Job Posting Detail

Careers33: HR Job Posting Detail

A single-position detail layout: a header block with an eyebrow badge, heading, description, and an icon-tagged meta row, then a two-column body where the left column stacks Job Description, Key Responsibilities, Required Qualifications, Preferred Qualifications, and What We Offer lists, and the right column holds a sticky card summarizing the role with a stack of apply 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/careers33?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/careers33.tsx, plus the badge and button shadcn/ui primitives it uses for the eyebrow badge and the sidebar apply buttons.

Quick start

The installed file exports careers33Demo alongside the block: the exact props behind the preview above. Spread it to get a working job posting detail in one line.

import { Careers33, careers33Demo } from "@/components/beste/block/careers33";

export default function JobDetailPage() {
  return <Careers33 {...careers33Demo} />;
}

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

import { Careers33 } from "@/components/beste/block/careers33";

export default function JobDetailPage() {
  return (
    <Careers33
      badge={{ label: "People & Culture", variant: "secondary" }}
      heading="HR Manager"
      description="Lead our people operations and drive talent, engagement, and org development initiatives."
      meta={[
        { label: "Location", value: "New York, NY" },
        { label: "Type", value: "Full-time" },
      ]}
      responsibilities={["Develop and implement HR strategies", "Lead full-cycle recruitment"]}
      qualifications={["5+ years in HR management", "Strong knowledge of employment law"]}
      offers={["Competitive salary", "Comprehensive health insurance"]}
      sidebar={[
        { label: "Department", value: "People & Culture" },
        { label: "Employment Type", value: "Full-time" },
      ]}
      buttons={[{ label: "Apply for This Position", href: "/apply" }]}
    />
  );
}

Props

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

Behavior notes

• description is rendered twice: once as the header paragraph under the heading, and again as the body of the "Job Description" section. Both blocks only render when description is set, so passing it fills two spots at once.
• The meta row maps each label to an icon through a fixed lookup keyed on the exact strings Location, Type, Experience, and Posted; any other label renders with no icon, and the match is case-sensitive.
• Every body section is conditionally rendered: it appears only when its array has at least one item, so omitting a prop cleanly drops the whole section including its heading.
• The header wrapper only renders when at least one of badge, heading, description, or a non-empty meta is present.
• Responsibilities, qualifications, and preferred lists use a Check icon bullet while the offers list uses a Gift icon; the icons are decorative and fixed, not configurable.
• The buttons render as shadcn Button with asChild wrapping a Next.js Link, so href values are routed through next/link; there is no click handler, the buttons are pure navigation.
• On lg screens the layout is a three-column grid where the content spans two columns and the sidebar card is sticky at top-8; below lg the sidebar stacks under the content and loses its sticky behavior.