Diversity & Inclusion

Careers20: Diversity & Inclusion

A centered diversity-and-inclusion section that stacks an optional badge, a heading with inline <strong> accent, and a lead paragraph over a responsive grid of representation stats and a three-column grid of initiative cards, each card showing a title and optional description.

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

Base UI flavor

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

This installs the block to components/beste/block/careers20.tsx, plus the badge shadcn/ui primitive it uses for the section eyebrow badge.

Quick start

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

import { Careers20, careers20Demo } from "@/components/beste/block/careers20";

export default function Page() {
  return <Careers20 {...careers20Demo} />;
}

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

import { Careers20 } from "@/components/beste/block/careers20";

export default function Page() {
  return (
    <Careers20
      badge={{ label: "Diversity & Inclusion", variant: "secondary" }}
      heading="Building a team that <strong>reflects the world</strong>"
      description="We believe diverse teams build better products."
      stats={[
        { value: "48%", label: "Women in leadership" },
        { value: "32", label: "Nationalities represented" },
      ]}
      initiatives={[
        { title: "Equitable Hiring", description: "Structured interviews and blind resume reviews." },
      ]}
    />
  );
}

Props

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

type InitiativeItem = {
  title: string;
  description?: string;
};

Behavior notes

• The entire header block (badge, heading, description) is wrapped in a single badge || heading || description guard, so if all three are omitted the top region collapses and the section opens straight into the stats grid.
• heading is rendered via dangerouslySetInnerHTML, and only inline <strong> is styled: the [&>strong]:text-primary selector recolors it to the primary tone, while any other markup passes through unstyled.
• badge.variant falls back to "default" via badge.variant ?? "default" when the badge is present but no variant is given.
• The stats grid is conditionally rendered only when stats.length > 0; it is fixed at grid-cols-2 on mobile and md:grid-cols-4, so any number of stats wraps into those two or four columns regardless of count.
• The initiatives grid is conditionally rendered only when initiatives.length > 0 and uses sm:grid-cols-3, so it is optimized for exactly three cards; more or fewer still flow into the three-column track.
• Each initiative card renders its description paragraph only when the field is present, leaving a title-only card when it is omitted.
• The component is purely presentational: it holds no internal state, exposes no callbacks, and every element is static markup, so all interactivity is left to the integrator.