Single Role Detail

Careers52: Single Role Detail

A job description laid out as a reading column with checked responsibility lists and a candid caveat panel, against a sticky rail carrying the published salary band, level and location alongside the apply action.

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

Base UI flavor

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

This installs the block to components/beste/block/careers52.tsx plus the badge23 and button21 components it uses for the eyebrow and the apply action.

Quick start

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

import { Careers52, careers52Demo } from "@/components/beste/block/careers52";

export default function RolePage() {
  return <Careers52 {...careers52Demo} />;
}

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

import { Careers52 } from "@/components/beste/block/careers52";

export default function RolePage() {
  return (
    <Careers52
      badge={{ label: "Open role" }}
      heading="Senior engineer, scheduling"
      standfirst="You would own the part of the product that cannot be down at eight in the morning."
      facts={[
        { label: "Salary", value: "£92,000 to £108,000" },
        { label: "Level", value: "Senior, no negotiation on band" },
        { label: "Location", value: "Bristol or remote in UK and Ireland" },
      ]}
      intro={[
        "Scheduling is where a practice either works or does not.",
        "You would be the third engineer on this area and the first senior one.",
      ]}
      sections={[
        {
          title: "What you would actually do",
          items: [
            "Own the scheduling and capacity model end to end",
            "Take support shifts like everyone else",
          ],
        },
      ]}
      honestyTitle="The honest part"
      honestyBody="We are eighteen people and profitable, which means no big-company career ladder."
      button={{ label: "Apply for this role", href: "/careers/apply" }}
      applyNote="Every application gets read by an engineer and answered within a week."
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

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

type Section = {
  title: string;
  items: string[];
};

Behavior notes

• The salary band sits in facts, not in the body, so it is visible without scrolling and stays visible while the description scrolls. That placement is the point of the sticky rail.
• The rail is lg:sticky lg:top-24 lg:self-start. The self-start is required, otherwise the column stretches to the full row height and sticky has nothing to travel within. Adjust top-24 to match your own fixed header.
• Sticky is lg and above only. Below that the rail scrolls normally and lands after the description, so the apply action is the last thing on the page.
• sections is an array rather than fixed responsibility and requirement props, so a role can have one list or four without editing the block.
• Intro paragraphs are plain strings rendered as separate p elements, with no markdown parsing, so links or emphasis need the block edited rather than passed in.
• The check icons are aria-hidden and the text carries the meaning, so a screen reader hears a plain list.
• The caveat panel is a bg-muted block rather than a bordered card, which keeps it reading as an aside inside the description rather than as a competing section.
• Facts carry border-t with no closing rule, so the rail stays open at the bottom and flows into the apply action.