Hero166: Split Headline Hero

An editorial hero that breaks its display heading across two lines and slots a square image tile floating a live payment card into the gap, with the paragraph and action landing under a hairline.

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

Base UI flavor

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

This installs the block to components/beste/block/hero166.tsx, the receipt3 payment piece it floats on the tile (installed to components/beste/piece/receipt3.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Hero166, hero166Demo } from "@/components/beste/block/hero166";

export default function Page() {
  return <Hero166 {...hero166Demo} />;
}

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

import { Hero166 } from "@/components/beste/block/hero166";
import { Receipt3 } from "@/components/beste/piece/receipt3";

export default function Page() {
  return (
    <Hero166
      badge={{ label: "Getting paid" }}
      headingLead="The invoice is written"
      headingTail="before the room is tidied"
      description="Charges attach themselves to the appointment that produced them, so the money side finishes when the clinic day does."
      button={{ label: "See how billing works", href: "/billing" }}
      media={
        <Receipt3
          status="Payment received"
          amount="$1,240.00"
          caption="Bramble Health · May care plan"
          rows={[
            { label: "Method", value: "Visa ending 4417" },
            { label: "Reference", value: "SIR-4821" },
          ]}
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
    />
  );
}

Props

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

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

Behavior notes

• The heading is split across two props on purpose. headingLead is the h1 spanning all three columns, and headingTail is a p styled identically that spans two, so the tile can sit in the gap without breaking the page into two competing headings.
• headingTail uses flex items-end, which drops the second line to the bottom of its row so it aligns with the base of the tile beside it rather than floating at the top.
• Because the tail is a paragraph, screen readers get one heading, not two. Only change that if the second line genuinely reads as a separate heading.
• The action wrapper is flex items-start md:justify-end. The items-start is load-bearing: the cell is sized by the two-column paragraph beside it, and without it the button would stretch to that full height.
• The lower row repeats the same md:grid-cols-3 rhythm as the heading row, so the paragraph lines up under the tile edge instead of running the full width.
• The tile is a fixed band (h-64, then md:h-72) sitting in a single grid column, which is what keeps it near-square while the two heading lines take the remaining width.