Team Events Gallery

Careers29: Team Events Gallery

A centered header (optional badge, heading, and description) above a responsive one-to-three-column grid of photo cards, each rendering an aspect-video cover image that scales up on hover plus a small title and optional caption, built to showcase company events, offsites, and team culture.

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

Base UI flavor

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

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

Quick start

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

import { Careers29, careers29Demo } from "@/components/beste/block/careers29";

export default function Page() {
  return <Careers29 {...careers29Demo} />;
}

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

import { Careers29 } from "@/components/beste/block/careers29";

export default function Page() {
  return (
    <Careers29
      badge={{ label: "Team Life", variant: "secondary" }}
      heading="Events & <strong>offsites</strong>"
      description="Some of the moments that bring us together."
      items={[
        {
          image: { src: "/photos/offsite.jpg", alt: "Team hiking on offsite" },
          title: "Annual Company Offsite",
          description: "Three days in the mountains.",
        },
        {
          image: { src: "/photos/hackathon.jpg", alt: "Team at hackathon" },
          title: "Hackathon Week",
          description: "48 hours to build anything.",
        },
      ]}
    />
  );
}

Props

type EventPhoto = {
  image?: { src: string; alt: string };
  title: string;
  description?: string;
};

Behavior notes

• The entire header block is conditionally rendered: it only appears when at least one of badge, heading, or description is provided, otherwise the grid sits alone.
• heading is injected via dangerouslySetInnerHTML, so inline <strong> markup renders and is recolored to text-primary; any raw HTML you pass is trusted and rendered as-is.
• badge.variant falls back to "default" when omitted, since the value is resolved with badge.variant ?? "default".
• Each card's image is optional: when item.image is missing the card renders only the title and caption with no picture placeholder, and item.description is likewise conditional.
• Cards are keyed by array index, and the grid is purely presentational: there are no click handlers, links, or callbacks on any card, so wiring navigation or lightbox behavior is left to the integrator.
• The grid steps from one column to sm:grid-cols-2 to lg:grid-cols-3; images use a fixed aspect-video frame and scale to 105% on hover via the per-card group/careers29 hover group.