Benefits Breakdown

Careers49: Benefits Breakdown

A left-aligned careers benefits section that renders an optional eyebrow badge and heading above a two-column grid of category cards, each card showing an icon in a tinted square, a category name, and a checklist of items prefixed with a check mark.

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

Base UI flavor

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

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

Quick start

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

import { Careers49, careers49Demo } from "@/components/beste/block/careers49";

export default function Page() {
  return <Careers49 {...careers49Demo} />;
}

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

import { GraduationCap, HeartPulse } from "lucide-react";
import { Careers49 } from "@/components/beste/block/careers49";

export default function Page() {
  return (
    <Careers49
      label="Life At Polaris"
      heading="Everything the studio puts behind your craft."
      categories={[
        {
          icon: HeartPulse,
          name: "Health & care",
          items: [
            "Fully covered medical, dental and vision.",
            "Annual wellness stipend for whatever resets you.",
          ],
        },
        {
          icon: GraduationCap,
          name: "Growth & craft",
          items: ["A yearly learning budget for courses and books."],
        },
      ]}
    />
  );
}

Props

type BenefitCategory = {
  icon: LucideIcon;
  name: string;
  items: string[];
};

Behavior notes

• label renders through the Badge6 component and heading through a plain <h2>; both are conditionally rendered and skipped entirely when their value is falsy.
• heading is inserted as plain text, so inline markup like <strong> is not interpreted; only the badge and heading strings are supported in the header.
• Category cards are keyed by array index, and each item within a card is likewise keyed by its index, so reordering categories or items re-renders against position rather than a stable id.
• The grid is fixed at a single column on mobile and two columns from the md breakpoint up (md:grid-cols-2) regardless of how many categories are passed, so an odd count leaves the last card in a single occupied column.
• Each category.icon is read into a local Icon variable and rendered at size-5 inside a size-11 tinted bg-primary/10 square; icons must be LucideIcon components, not rendered elements.
• The block is entirely presentational: there are no callbacks, no internal useState, and no interactive elements, so items are static checklist rows with no click handling.