Poster Hero With Proof CardPRO

Hero154: Poster Hero With Proof Card

A poster-scale statement over a wide photograph, with a proof card lifted into the picture's corner on desktop carrying a short case and the number behind it.

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

Base UI flavor

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

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

Quick start

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

import { Hero154, hero154Demo } from "@/components/beste/block/hero154";

export default function Page() {
  return <Hero154 {...hero154Demo} />;
}

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

import { Hero154 } from "@/components/beste/block/hero154";

export default function Page() {
  return (
    <Hero154
      badge={{ label: "Poster" }}
      heading="One picture, one promise, one number you can hold us to."
      description="We put the proof on the front of the page."
      button={{ label: "See what we promised", href: "/work" }}
      image={{ src: "/work/interior.jpg", alt: "Retail interior with monochrome shelving" }}
      card={{
        title: "Marchetti Coffee, eighteen rooms",
        description: "A kit local teams could apply without us.",
        valueTitle: "Studio days per opening",
        value: "Down to 2",
      }}
    />
  );
}

Props

type HeroImage = {
  src: string;
  alt: string;
};

type OverlayCard = {
  title: string;
  description: string;
  value: string;
  valueTitle: string;
};

type ActionButton = {
  label: string;
  href: string;
};

Behavior notes

• The card only overlays from md up: below that it is a normal block under the picture (mt-6, no absolute positioning), so a phone never gets a card covering half the image.
• On desktop it is pinned with md:bottom-8 md:right-8 and capped at md:max-w-sm, so a long case description grows downward instead of creeping across the photograph.
• The card sits on bg-muted with theme tokens rather than a translucent fill, so the text stays fully legible whatever the picture behind it is doing.
• Its figure is separated by border-t border-current/10, a shade of the card's own surface, so the rule does not read as a hard divider on a soft tile.
• The image switches ratio rather than height: aspect-[4/3] on mobile becomes md:aspect-[21/9], keeping the poster crop cinematic without letterboxing a phone.
• The copy block is capped at max-w-3xl while the section runs to max-w-7xl, which is what makes the statement read as a poster line rather than a full-width banner.
• Every part is optional: without card the hero is a statement over a wide plate, and without image it is a plain poster block.