Studio Culture

Careers42: Studio Culture

A two-column culture section that pairs a left-hand story block (an optional Badge6 eyebrow, a heading with inline <strong> accents, a lead paragraph, and a bulleted list of tenets each marked by a small primary square) with a right-hand three-image collage where the first image is a tall feature spanning both rows and the next two stack beside it, all zooming on hover.

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

Base UI flavor

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

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

Quick start

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

import { Careers42, careers42Demo } from "@/components/beste/block/careers42";

export default function CareersPage() {
  return <Careers42 {...careers42Demo} />;
}

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

import { Careers42 } from "@/components/beste/block/careers42";

export default function CareersPage() {
  return (
    <Careers42
      label="Inside Polaris"
      heading="We build a studio where good people make <strong>their best work yet.</strong>"
      description="Polaris runs on craft and candor. We sit close, share early, and edit each other without ego."
      tenets={[
        "Show the messy draft on day one, not the polished version on day ten.",
        "Critique the work, protect the person who made it.",
      ]}
      images={[
        { src: "/studio/team.jpg", alt: "Team reviewing work together" },
        { src: "/studio/sketch.jpg", alt: "Designer sketching layout ideas" },
        { src: "/studio/desk.jpg", alt: "Two members laughing at a desk" },
      ]}
    />
  );
}

Props

type ImageItem = {
  src: string;
  alt: string;
};

Behavior notes

• Every field is optional and gated on its own truthiness: label, heading, and description each render only when non-empty, tenets renders its <ul> only when tenets.length > 0, and the whole collage column renders only when images.length > 0.
• heading is injected via dangerouslySetInnerHTML, so any HTML in the string is rendered; the styling only targets nested <strong>, which is set to text-muted-foreground for a two-tone heading effect. Pass trusted strings only.
• The collage is positional, not a loop: images[0] becomes the tall row-span-2 feature at aspect-[3/4], while images[1] and images[2] stack as aspect-[4/3] tiles. Any fourth or later image in the array is ignored.
• Each collage image scales to 1.05 on hover of the shared group/careers42 container, so hovering anywhere over the collage zooms all three images at once, not just the one under the cursor.
• Tenets are keyed by array index and rendered as plain text; each is prefixed by a decorative size-2.5 primary square, and there is no interactivity, callback, or selection state anywhere in the block.
• The section has no fixed background surface: it inherits the page background and relies on theme tokens (text-muted-foreground, text-foreground, bg-primary, bg-muted) throughout.