Studio People Bento

Bento7: Studio People Bento

A team section that reads as a wall of portraits rather than a card list. One person takes the tall lead tile, a wide inverted quote sits beside it, and a plain figure tile is worked into the run so the grid never ends on an empty column.

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

Base UI flavor

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

This installs the block to components/beste/block/bento7.tsx plus the badge7 eyebrow it uses.

Quick start

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

import { Bento7, bento7Demo } from "@/components/beste/block/bento7";

export default function Page() {
  return <Bento7 {...bento7Demo} />;
}

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

import { Bento7 } from "@/components/beste/block/bento7";

export default function Page() {
  return (
    <Bento7
      badge={{ label: "Who is here" }}
      heading="Everyone you would actually work with."
      people={[
        { src: "/team/ilse.jpg", alt: "Worktable", name: "Ilse Brandt", role: "Type and editorial" },
        { src: "/team/ravi.jpg", alt: "Signage drafts", name: "Ravi Suleiman", role: "Environments" },
        { src: "/team/nora.jpg", alt: "Studio monitor", name: "Nora Aldridge", role: "Interface" },
        { src: "/team/teodor.jpg", alt: "Specimen desk", name: "Teodor Vance", role: "Production" },
      ]}
      quote={{
        quote: "If your name is on the project you are the one sitting in the review.",
        name: "Ilse Brandt",
        role: "Founding partner",
      }}
      figure={{ value: "6.4", title: "Average years on the team" }}
    />
  );
}

Props

type Person = {
  src: string;
  alt: string;
  name: string;
  role: string;
};

type TeamQuote = {
  quote: string;
  name: string;
  role: string;
};

type FigureTile = {
  value: string;
  title: string;
};

Behavior notes

• The first entry in people becomes the lead portrait at md:col-span-2 md:row-span-2 with a larger name, so ordering the array decides who anchors the wall.
• The rest are split deliberately: the next two portraits sit beside the quote, the figure tile takes the four columns after them, and anything from the fourth person on continues after it. That is what keeps every row of six columns full.
• Portraits render as real figure and figcaption elements, with the name and role on a gradient scrim inside the picture rather than underneath it.
• The quote tile is the only inverted surface, so the section has one dark anchor; its text-background tokens are hardcoded because that surface is fixed rather than adaptive.
• The figure tile stays on bg-muted with theme tokens, which stops the grid from carrying two competing dark blocks.
• Portrait tiles hold aspect-[3/4] below md and switch to md:aspect-auto, so md:auto-rows-[minmax(13rem,auto)] sets their height on desktop while phones keep a proper portrait crop.
• Every part is optional: drop quote or figure and the portraits simply reflow through the same six-column grid.