Split Screen Panel HeroPRO

Hero156: Split Screen Panel Hero

An edge-to-edge split: an inverted panel carrying the statement, paragraph, CTA and a ruled detail row on one half, a full-height photograph with a pill caption on the other.

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

Base UI flavor

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

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

Quick start

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

import { Hero156, hero156Demo } from "@/components/beste/block/hero156";

export default function Page() {
  return <Hero156 {...hero156Demo} />;
}

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

import { Hero156 } from "@/components/beste/block/hero156";

export default function Page() {
  return (
    <Hero156
      badge={{ label: "Taking commissions" }}
      heading="Half the page is the work. The other half is why."
      description="Auralis builds identity systems for companies whose product is already good."
      button={{ label: "Take the empty half", href: "/contact" }}
      image={{ src: "/work/stair.jpg", alt: "Concrete stairwell lit from a high window" }}
      labels={{ imageCaption: "Kestrel Group, north stair" }}
      details={[
        { label: "Next opening", value: "September" },
        { label: "Based in", value: "Rotterdam" },
      ]}
    />
  );
}

Props

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

type HeroLink = {
  label: string;
  value: string;
};

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

type Hero156Labels = {
  imageCaption?: string;
};

Behavior notes

• The section has no max-w container of its own, so both halves run edge to edge; the panel supplies its own padding, which grows from px-4 to lg:px-16.
• The panel is justify-between, so the details row stays pinned to the bottom of the split while the copy stays at the top, whatever the picture's height does.
• The panel is a fixed inverted surface, so its text-background tokens are hardcoded rather than adaptive, and the Badge7 is passed className="text-background/70" for the same reason.
• The photograph holds min-h-[360px] below md and releases it with md:min-h-0, so on a phone it is a proper band under the panel and on desktop it simply fills its half.
• The caption is a pill on bg-background pinned inside the picture, inset further on desktop, so it reads as a plate on the print rather than a line under it.
• Detail rules use border-background/30, a shade of the panel's copy colour rather than the theme border token.
• Below md the grid collapses to one column in source order, so the copy is read before the picture.