Selected Work Bento

Bento3: Selected Work Bento

A portfolio index hung as a mosaic. One project takes the large tile, the smaller ones sit beside a dark figure and a statement tile that carries its own text link, and every caption lives on the photograph rather than under it.

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

Base UI flavor

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

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

Quick start

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

import { Bento3, bento3Demo } from "@/components/beste/block/bento3";

export default function Page() {
  return <Bento3 {...bento3Demo} />;
}

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

import { Bento3 } from "@/components/beste/block/bento3";

export default function Page() {
  return (
    <Bento3
      badge={{ label: "Selected work" }}
      heading="Five projects, arranged the way they were hung."
      tiles={[
        {
          src: "/work/kestrel.jpg",
          alt: "Signage across a lobby wall",
          title: "Kestrel Group",
          meta: "Wayfinding and signage",
          href: "/work/kestrel",
        },
        {
          src: "/work/marchetti.jpg",
          alt: "Coffee packaging on concrete",
          title: "Marchetti Coffee",
          meta: "Packaging",
          href: "/work/marchetti",
        },
      ]}
      figure={{ value: "212", title: "Commissions finished since 2014" }}
      statement={{
        title: "Three at a time, never four",
        description: "A slot opens when something ships.",
        buttonLabel: "Ask about the next slot",
        href: "/contact",
      }}
    />
  );
}

Props

type WorkTile = {
  src: string;
  alt: string;
  title: string;
  meta: string;
  href: string;
};

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

type StatementTile = {
  title: string;
  description: string;
  buttonLabel: string;
  href: string;
};

Behavior notes

• The first entry in tiles is destructured out as the lead: it spans md:col-span-4 md:row-span-2 and gets a larger title, so ordering the array is how you choose the hero project.
• Every tile is a Link across its whole area, so the photograph, the title and the meta line are one target rather than a small link under an image.
• Captions sit on the image over a from-foreground/85 gradient scrim, which is what keeps the mosaic readable when it collapses to a single column on a phone.
• Photo tiles carry aspect-[4/3] below md and switch to md:aspect-auto, letting the grid rows (md:auto-rows-[minmax(13rem,auto)]) decide their height on desktop instead of the image ratio.
• Only the figure tile is inverted, so the mosaic has exactly one dark anchor; its text-background tokens are hardcoded because that surface is fixed rather than adaptive.
• The statement tile uses justify-between, so its link stays pinned to the bottom edge no matter how long the paragraph runs.
• Tiles fill six columns per row (4+2, 4+2, then 2+2+2), so four project tiles plus the figure and statement leave no gap at the end of a row.