Benefits And Honest Omissions

Careers54: Benefits And Honest Omissions

A working-here section pairing a six-item icon benefits grid and a captioned full-bleed photograph with two closing cards that set what you get against what the company deliberately does not offer.

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

Base UI flavor

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

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

Quick start

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

import { Careers54, careers54Demo } from "@/components/beste/block/careers54";

export default function CareersPage() {
  return <Careers54 {...careers54Demo} />;
}

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

import { CalendarDays, Coins, Home } from "lucide-react";
import { Careers54 } from "@/components/beste/block/careers54";

export default function CareersPage() {
  return (
    <Careers54
      badge={{ label: "Working here" }}
      heading="What we offer, and the things we deliberately do not"
      description="Written out in full, including the second list."
      benefits={[
        {
          icon: CalendarDays,
          title: "A four-day week",
          description: "Thirty-two hours, full pay, and we do not quietly expect the fifth day.",
        },
        {
          icon: Coins,
          title: "Published salary bands",
          description: "The band is on the advert and it does not move.",
        },
        {
          icon: Home,
          title: "Remote across UK and Ireland",
          description: "Or the Bristol desk if you want it.",
        },
      ]}
      image={{ src: "/team/company-week.jpg", alt: "A team gathered in a bright room" }}
      caption="One of the two company weeks, in Bristol."
      haveTitle="What you get"
      have={["A named area you own, not a queue of tickets", "Written decisions you can disagree with"]}
      notTitle="What we do not have"
      not={["Equity refresh cycles", "A management ladder"]}
      button={{ label: "See open roles", href: "/careers" }}
    />
  );
}

Props

import type { LucideIcon } from "lucide-react";

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

type Benefit = {
  icon: LucideIcon;
  title: string;
  description: string;
};

Behavior notes

• The container is opened and closed three times: the header and benefits sit in a max-w-7xl wrapper, the photograph is a direct child of the section so it runs edge to edge, and the closing cards open a fresh wrapper. That is what lets one section mix gridded and full-bleed content.
• Because of that, padding is split too: the section carries pt-16 only, and the bottom padding lives on the final wrapper.
• The caption sits inside a max-w-7xl wrapper of its own with matching padding, so it lines up with the text above even though the photograph does not.
• The photograph is a real figure with a figcaption, so the caption stays associated with the image.
• The two closing cards mirror each other: accent border on bg-card for what you get, plain border on bg-muted for what you do not, with Check and X icons following from that. Both icons are aria-hidden, since the card headings frame each list.
• Icons are passed as components, not names. Import the lucide-react icon and hand it over; the block renders it at size-5 in a size-10 tinted tile.
• The benefits grid is one, two, then three across, which is why six is the count it is built for.