Industry Portrait TilesPRO

Usecase46: Industry Portrait Tiles

Four industries as tall portrait tiles: a photograph, the sector, what the work involves, and a ruled foot carrying the proof line with its own link. No section CTA, so the tiles are the only way out.

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

Base UI flavor

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

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

Quick start

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

import { Usecase46, usecase46Demo } from "@/components/beste/block/usecase46";

export default function Page() {
  return <Usecase46 {...usecase46Demo} />;
}

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

import { Usecase46 } from "@/components/beste/block/usecase46";

export default function Page() {
  return (
    <Usecase46
      badge={{ label: "Fields we know" }}
      heading="Four industries where we already know the questions."
      description="Not because we are specialists, but because we have been wrong in each of them."
      sectors={[
        {
          src: "/sectors/publishing.jpg",
          alt: "Stacked print publications",
          sector: "Publishing",
          description: "Catalogues, journals and the reading order that decides the rest.",
          proof: "Nine titles, four presses",
          href: "/work/publishing",
          linkLabel: "See publishing work",
        },
        {
          src: "/sectors/retail.jpg",
          alt: "Retail interior with monochrome shelving",
          sector: "Retail",
          description: "Rooms, shelves and packaging that has to survive a busy Saturday.",
          proof: "Eighteen rooms opened",
          href: "/work/retail",
          linkLabel: "See retail work",
        },
      ]}
    />
  );
}

Props

type SectorTile = {
  src: string;
  alt: string;
  sector: string;
  description: string;
  proof: string;
  href: string;
  linkLabel: string;
};

Behavior notes

• Each tile is flex flex-col with the ruled foot on mt-auto, so the proof line and its link stay level across the row however long the descriptions run.
• Every sector carries its own href and linkLabel, so the section needs no shared CTA at the bottom and each industry can point somewhere different.
• Links are underlined text rather than buttons, which keeps four of them in one row from reading as four competing calls to action.
• Photographs sit above the copy in a aspect-[4/5] portrait frame with no hover treatment: the picture is content, not an affordance.
• The grid steps one, two then four columns (sm:grid-cols-2 lg:grid-cols-4), so a four-sector set stays a two-by-two block on a tablet instead of squeezing.
• Row gaps are larger than column gaps (gap-x-6 gap-y-12), so stacked tiles stay separated when the grid wraps.
• The header is md:items-end, so the supporting paragraph sits on the heading's baseline rather than beside its first line.