Stacked Photo Bands

Usecase48: Stacked Photo Bands

Three full-width photographic bands, each carrying its own eyebrow, statement, story, figure and outline CTA on a rule inside the picture. Every band is one complete case.

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

Base UI flavor

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

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

Quick start

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

import { Usecase48, usecase48Demo } from "@/components/beste/block/usecase48";

export default function Page() {
  return <Usecase48 {...usecase48Demo} />;
}

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

import { Usecase48 } from "@/components/beste/block/usecase48";

export default function Page() {
  return (
    <Usecase48
      badge={{ label: "Three situations" }}
      heading="Full-width, because these are full-width problems."
      description="Each band is a job that turned into the reason the system had to exist."
      bands={[
        {
          eyebrow: "Opening week",
          title: "Everything printed, delivered and on the wall in nine days",
          description: "A lease signed earlier than planned and a room that had to look finished.",
          figure: "9 days",
          figureTitle: "Brief to opening",
          buttonLabel: "Read what shipped",
          href: "/work/opening",
          src: "/bands/retail.jpg",
          alt: "Retail interior with monochrome shelving",
        },
        {
          eyebrow: "Annual report",
          title: "Two hundred pages that people actually read to the end",
          description: "Data, photography and a reading order argued out first.",
          figure: "68%",
          figureTitle: "Reached the final section",
          buttonLabel: "See the report",
          href: "/work/report",
          src: "/bands/report.jpg",
          alt: "Open print publication",
        },
      ]}
    />
  );
}

Props

type BandScenario = {
  eyebrow: string;
  title: string;
  description: string;
  figure: string;
  figureTitle: string;
  buttonLabel: string;
  href: string;
  src: string;
  alt: string;
};

Behavior notes

• The foot of each band only becomes three columns from lg up. At tablet width the sentence would be squeezed into a four-word column, so the figure and the CTA share a row underneath it instead, using lg:contents to dissolve their wrapper when the wide layout takes over.
• Each band carries its own CTA inside the picture, so the section needs no shared button at the bottom and every case can point somewhere different.
• A flat bg-foreground/65 wash covers the whole photograph rather than a gradient, because content runs from the eyebrow down to the figure and needs even contrast the whole way.
• Text tokens inside a band are fixed background shades and the Badge7 is passed className="text-background/70", correct for a surface that is a dark photograph in both themes.
• The rule under the statement is border-background/30, a shade of the copy colour rather than the theme border token, so it belongs to the picture.
• Bands hold min-h-[420px] growing to md:min-h-[480px] and are justify-end, so the copy stays anchored to the foot however tall the band gets.
• The CTA carries shrink-0, so a long button label keeps its width instead of being compressed by the figure beside it.