Phase Bento With Photographs

Bento5: Phase Bento With Photographs

A process section built entirely from photographs. The opening phase takes the large tile with its full description and duration, the remaining phases become smaller image tiles, and one inverted note tile explains how the schedule really behaves.

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

Base UI flavor

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

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

Quick start

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

import { Bento5, bento5Demo } from "@/components/beste/block/bento5";

export default function Page() {
  return <Bento5 {...bento5Demo} />;
}

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

import { Bento5 } from "@/components/beste/block/bento5";

export default function Page() {
  return (
    <Bento5
      badge={{ label: "How it runs" }}
      heading="Four phases, photographed as they actually looked."
      labels={{ durationTitle: "Time on the clock" }}
      phases={[
        {
          index: "Phase 01",
          title: "Reading the room",
          description: "Two days on site and a list of what already works.",
          duration: "1 week",
          src: "/process/site.jpg",
          alt: "Team at a shared table",
        },
        {
          index: "Phase 02",
          title: "Drawing the options",
          description: "Three directions, printed at full size.",
          duration: "3 weeks",
          src: "/process/sketches.jpg",
          alt: "Sketches pinned to a desk",
        },
      ]}
      note={{
        title: "Twelve weeks, give or take",
        description: "Phases overlap by design. The only hard stop is the press date.",
      }}
    />
  );
}

Props

type PhaseTile = {
  index: string;
  title: string;
  description: string;
  duration: string;
  src: string;
  alt: string;
};

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

type Bento5Labels = {
  durationTitle?: string;
};

Behavior notes

• The first entry in phases is destructured out as the lead: it spans md:col-span-4 md:row-span-2 and is the only tile that shows description and duration in full, so ordering the array chooses which phase gets explained.
• Later phases keep the same data shape but render only their index, title and duration, which is what stops the small tiles from overflowing on a tablet.
• The tile after the lead takes md:col-span-2 and the ones after it take md:col-span-3, so a four-phase set plus the note fills every row completely.
• Each photograph carries a from-foreground/85 gradient scrim, so the white text on top stays legible whatever the image underneath does.
• The lead tile's Badge7 is passed className="text-background/70", which is how the eyebrow reads correctly on a dark photograph rather than fighting the theme token.
• Only the note tile is inverted with a flat fill; its text-background tokens are hardcoded because that surface is fixed rather than adaptive.
• Below md the image tiles hold aspect-[4/3] and stack in source order, so the phases read top to bottom on a phone with no text sitting outside its picture.