Benefits & Perks

Careers41: Benefits & Perks

A split-header careers section that pairs an eyebrow badge and large heading on the left with a lead paragraph on the right, above a responsive benefits grid of icon cards where any card flagged accent renders as a filled primary tile and the rest render as bordered card surfaces.

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

Base UI flavor

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

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

Quick start

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

import { Careers41, careers41Demo } from "@/components/beste/block/careers41";

export default function CareersPage() {
  return <Careers41 {...careers41Demo} />;
}

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

import { HeartPulse, Plane, Sparkles } from "lucide-react";
import { Careers41 } from "@/components/beste/block/careers41";

export default function CareersPage() {
  return (
    <Careers41
      label="Life at the studio"
      heading="Perks that let the work breathe"
      lead="These are the standards we hold ourselves to: room to think, time to recover, and the tools to make the craft feel effortless."
      benefits={[
        { icon: Sparkles, title: "Four-day creative weeks", description: "Fridays stay open for deep work.", accent: true },
        { icon: HeartPulse, title: "Care that's covered", description: "Premium medical, dental, and vision." },
        { icon: Plane, title: "Unmetered time off", description: "Take the days you need." },
      ]}
    />
  );
}

Props

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

Behavior notes

• The header is a lg:grid-cols-2 split that only becomes two columns at the lg breakpoint; below that the heading block and lead paragraph stack, with lg:items-end bottom-aligning them when side by side.
• label, heading, and lead are each conditionally rendered and disappear entirely when their prop is falsy, so passing only some of them collapses the header gracefully.
• heading and description are rendered as plain text nodes, not dangerouslySetInnerHTML, so inline markup like <strong> passed in a string would show as literal characters, not formatting.
• Each benefit's icon is read as a component (const Icon = benefit.icon) and must be a LucideIcon (or compatible component), not a rendered element.
• A benefit with accent: true renders a distinct filled bg-primary tile with no border and no hover transition; all other cards render as bordered bg-card surfaces that shift border color and scale their icon on hover.
• The grid is fixed at lg:grid-cols-3 (two columns at sm, one below), so the layout reads cleanest with a multiple-of-three benefit count; the demo ships six, with the first marked as the accent highlight.
• Cards are keyed by array index, so reordering or filtering benefits in place can cause React to reuse the wrong DOM nodes; supply a stable list if the array is dynamic.