Meet the Team Gallery

Careers14: Meet the Team Gallery

A centered header block (optional badge, heading with inline <strong>, and description) followed by a responsive grid of team members, each rendered as a square portrait image above a name and optional role.

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

Base UI flavor

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

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

Quick start

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

import { Careers14, careers14Demo } from "@/components/beste/block/careers14";

export default function TeamPage() {
  return <Careers14 {...careers14Demo} />;
}

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

import { Careers14 } from "@/components/beste/block/careers14";

export default function TeamPage() {
  return (
    <Careers14
      badge={{ label: "Our Team", variant: "secondary" }}
      heading="Meet the <strong>people behind the product</strong>"
      description="Get to know the people who make it all happen."
      items={[
        {
          name: "Sarah Chen",
          role: "CEO & Co-founder",
          image: { src: "/team/sarah.jpg", alt: "Sarah Chen" },
        },
        {
          name: "Marcus Johnson",
          role: "CTO",
          image: { src: "/team/marcus.jpg", alt: "Marcus Johnson" },
        },
      ]}
    />
  );
}

Props

type TeamMember = {
  name: string;
  role?: string;
  image?: {
    src: string;
    alt: string;
  };
};

Behavior notes

• The entire header block (badge, heading, description) is wrapped in a single (badge || heading || description) guard, so if none of the three is passed the grid renders with no header at all.
• heading is injected with dangerouslySetInnerHTML, and only <strong> inside it is styled (text-primary, font-semibold) via a [&>strong] selector, so nested or other tags receive no special styling.
• badge.variant falls back to "default" when omitted, even though the demo passes "secondary".
• Each member's image is optional: when absent the portrait <div> is skipped entirely and only the name/role text is shown, which collapses that grid cell's height.
• item.role is conditionally rendered, so a member with just a name shows a single line with no secondary text.
• The grid is fixed at one column on mobile, two at sm, and four at lg (sm:grid-cols-2 lg:grid-cols-4); there is no prop to change the column count.
• The block is purely presentational: images are plain <img> tags with a hover opacity transition (group-hover/careers14:opacity-90) and there are no click handlers, links, or callbacks on any member.
• Grid cells use the array index as their React key, so reordering items will not preserve element identity.