Visit The Studio BentoPRO

Bento10: Visit The Studio Bento

A contact section built from the place itself. Photographs of the building caption themselves on their own scrims, an inverted tile carries the address and directions link, a ruled tile lists opening hours, and a full-width bordered tile closes with the CTA.

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

Base UI flavor

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

This installs the block to components/beste/block/bento10.tsx plus the badge7 eyebrow and button12 pill button it uses.

Quick start

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

import { Bento10, bento10Demo } from "@/components/beste/block/bento10";

export default function Page() {
  return <Bento10 {...bento10Demo} />;
}

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

import { Bento10 } from "@/components/beste/block/bento10";

export default function Page() {
  return (
    <Bento10
      badge={{ label: "Come and see" }}
      heading="The studio is a real place with a real doorbell."
      labels={{ hoursTitle: "Open to visitors" }}
      images={[
        { src: "/studio/front.jpg", alt: "Studio facade", caption: "The front, second floor up" },
        { src: "/studio/table.jpg", alt: "Shared worktable", caption: "The table everything happens on" },
      ]}
      address={{
        title: "Auralis Studio",
        lines: ["Scheepmakerskade 34", "3011 VX Rotterdam", "Netherlands"],
        linkLabel: "Get directions",
        href: "https://maps.example.com/auralis",
      }}
      hours={[
        { title: "Monday to Thursday", value: "10:00 to 18:00" },
        { title: "Friday", value: "10:00 to 15:00" },
      ]}
      visit={{
        title: "Coffee is decent, the lift is slow",
        description: "Someone is always at the long table.",
        buttonLabel: "Arrange a visit",
        href: "/contact",
      }}
    />
  );
}

Props

type StudioImage = {
  src: string;
  alt: string;
  caption: string;
};

type AddressTile = {
  title: string;
  lines: string[];
  linkLabel: string;
  href: string;
};

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

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

type Bento10Labels = {
  hoursTitle?: string;
};

Behavior notes

• This mosaic runs on halves rather than sixths: the lead photograph and the address share the first band at md:col-span-3 each, with the photograph also taking md:row-span-2 so the hours tile slots in beneath the address.
• The address is a string[], so a three-line Dutch address and a five-line American one both render without changing the block.
• Opening hours render as a real dl with rows separated by border-t border-current/10; the row is flex-wrap with items-baseline, so a long day label and its time stay aligned and wrap cleanly instead of colliding.
• Every caption sits inside its picture on a gradient scrim, which is what keeps the section readable when the tiles stack into one column.
• The address 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 CTA tile spans all six columns and wraps its button with shrink-0, so on a narrow screen the button drops under the text at full size instead of being squeezed.
• Photographs hold aspect-[4/3] below md and switch to md:aspect-auto, letting md:auto-rows-[minmax(13rem,auto)] decide their height on desktop.