Role Spotlight

Careers46: Role Spotlight

A single-role job posting laid out in a two-column grid: the left column stacks an eyebrow badge, the role title, a row of chip pills (department, location, type, salary), a lead paragraph, and two check-listed columns for responsibilities and requirements, while the right column holds a sticky card with a facts definition list, a full-width apply button, and a closing note.

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

Base UI flavor

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

This installs the block to components/beste/block/careers46.tsx.

Quick start

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

import { Careers46, careers46Demo } from "@/components/beste/block/careers46";

export default function CareersPage() {
  return <Careers46 {...careers46Demo} />;
}

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

import { Careers46 } from "@/components/beste/block/careers46";

export default function CareersPage() {
  return (
    <Careers46
      label="Now hiring"
      role={{
        title: "Senior Brand Designer",
        department: "Creative Studio",
        location: "Brooklyn, NY / Remote",
        type: "Full-time",
        salary: "$135k to $165k",
      }}
      description="Own the visual voice of three to four client engagements at once, from first sketch to a production-ready toolkit."
      responsibilities={["Lead end-to-end identity work.", "Translate strategy decks into design directions."]}
      requirements={["6+ years of brand or identity design.", "Fluency in Figma and the full Adobe suite."]}
      facts={[
        { label: "Team", value: "Creative Studio" },
        { label: "Reports to", value: "Creative Director" },
      ]}
      applyHref="https://beste.co"
      applyLabel="Apply now"
      note="We review every application within five business days."
    />
  );
}

Props

type Role = {
  title: string;
  department: string;
  location: string;
  type: string;
  salary: string;
};

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

Behavior notes

• The role chip row is hardcoded to exactly four values, iterating [role.department, role.location, role.type, role.salary] by array index, so a missing field renders an empty chip rather than being skipped.
• Both the title (role) and the chip row require the role object; when role is undefined neither renders, even if other props are set.
• The responsibilities and requirements columns each render only when their array has length greater than zero, so passing one leaves the grid with a single populated column.
• The apply button renders only when both applyHref and applyLabel are set; it is a Button1 with asChild wrapping a Next.js Link, so navigation is real (not a console.log stub) but requires the Next.js router.
• The right-hand card uses lg:sticky lg:top-24 and only sticks at the lg breakpoint and above; on smaller screens it stacks below the posting and scrolls normally.
• The facts list uses divide-y with first:pt-0 so dividers appear between rows, not above the first one.
• There is no internal useState or callback surface: the block is fully presentational and driven entirely by props.