Figures On Photographs Bento

Bento8: Figures On Photographs Bento

A results section where every number sits on the picture that produced it. The first figure takes a large tile with its explanation, the rest become smaller tiles carrying value and title only, and a soft method tile closes the row with the source of the data.

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

Base UI flavor

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

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

Quick start

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

import { Bento8, bento8Demo } from "@/components/beste/block/bento8";

export default function Page() {
  return <Bento8 {...bento8Demo} />;
}

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

import { Bento8 } from "@/components/beste/block/bento8";

export default function Page() {
  return (
    <Bento8
      badge={{ label: "Counted" }}
      heading="Four figures, each with the picture that earned it."
      description="Put a statistic back on the work it came from and it means something."
      tiles={[
        {
          src: "/results/catalogue.jpg",
          alt: "Open print publication",
          value: "12,000",
          title: "Copies in the first run",
          description: "The catalogue sold out before the reprint was scheduled.",
        },
        {
          src: "/results/signage.jpg",
          alt: "Signage across a lobby wall",
          value: "1,400",
          title: "Signs installed",
          description: "Across nine buildings, from a kit of eleven components.",
        },
      ]}
      method={{
        title: "Where these come from",
        description: "Client reporting and install sheets. Nothing modelled or rounded up.",
      }}
    />
  );
}

Props

type FigureTile = {
  src: string;
  alt: string;
  value: string;
  title: string;
  description: string;
};

type MethodTile = {
  title: string;
  description: string;
};

Behavior notes

• The header is a two-column row on md:items-end, so the paragraph on the right sits on the same baseline as the heading rather than next to its top line.
• Only the first tile renders description: the smaller tiles show value and title alone, which is what stops their text from overflowing the shorter rows on a tablet.
• The lead value drops to text-6xl on mobile and md:text-8xl on desktop; the smaller tiles use text-4xl and md:text-5xl, so the hierarchy holds without any tile clipping its number.
• Photographs sit under a flat bg-foreground/60 wash rather than a gradient, because a figure aligned to the bottom of the tile needs even contrast across the whole picture, not only at its foot.
• The title block is separated from the value by border-t border-background/30, a rule inside the picture that ties the two lines together without a card.
• Tiles hold min-h-[300px] below md and release it with md:min-h-0, so the grid rows (md:auto-rows-[minmax(13rem,auto)]) take over on desktop.
• The lead tile spans 4 columns and 2 rows, the three smaller ones take 2 columns each, and the method tile takes the remaining 4, so a four-figure set fills every row exactly.