Placement Mosaic Grid

Usecase52: Placement Mosaic Grid

Six places one system has to survive, shown as a mosaic of photographs with mixed crops. Each picture is captioned under its own rule with the place, the application and the detail that matters.

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

Base UI flavor

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

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

Quick start

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

import { Usecase52, usecase52Demo } from "@/components/beste/block/usecase52";

export default function Page() {
  return <Usecase52 {...usecase52Demo} />;
}

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

import { Usecase52 } from "@/components/beste/block/usecase52";

export default function Page() {
  return (
    <Usecase52
      badge={{ label: "Where it shows up" }}
      heading="One system, six places it has to survive."
      description="An identity is only as good as its worst application."
      placements={[
        {
          src: "/placements/wall.jpg",
          alt: "Wayfinding signage in a public building",
          place: "On a wall",
          application: "Wayfinding and building signage",
          detail: "Read at eighteen metres, in the building's own light.",
        },
        {
          src: "/placements/hand.jpg",
          alt: "Unbranded paper packaging",
          place: "In a hand",
          application: "Packaging and printed collateral",
          detail: "Uncoated stock, single colour, no varnish to hide behind.",
        },
      ]}
    />
  );
}

Props

type PlacementTile = {
  src: string;
  alt: string;
  place: string;
  application: string;
  detail: string;
};

Behavior notes

• Crops alternate by position: every second tile in a row of three is aspect-[4/5] while the rest are aspect-[4/3], so the mosaic breaks its own rhythm without any per-item configuration.
• Tiles render as real figure and figcaption elements, with the caption under a border-t rule rather than on a scrim inside the picture.
• Each caption carries three levels in one block, place, application and detail, so a reader can scan the places alone or stop and read one.
• The grid steps one, two then three columns (sm:grid-cols-2 lg:grid-cols-3), which keeps the alternating crop pattern meaningful at desktop width and harmless below it.
• Row gaps are larger than column gaps (gap-x-6 gap-y-10), so stacked tiles stay separated when the grid wraps.
• Photographs carry no hover treatment and are not links: the section is evidence, not an index.
• The header is md:items-end, so the supporting paragraph sits on the heading's baseline rather than beside its first line.