Overlapping Savings HeroPRO

Hero161: Overlapping Savings Hero

A hero that pairs a light display heading with an offset paragraph and action, then drops a wide image band beneath them and overlaps its lower edge with a live savings card.

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

Base UI flavor

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

This installs the block to components/beste/block/hero161.tsx, the money23 savings piece it overlaps onto the band (installed to components/beste/piece/money23.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Hero161, hero161Demo } from "@/components/beste/block/hero161";

export default function Page() {
  return <Hero161 {...hero161Demo} />;
}

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

import { Hero161 } from "@/components/beste/block/hero161";
import { Money23 } from "@/components/beste/piece/money23";

export default function Page() {
  return (
    <Hero161
      badge={{ label: "One line item" }}
      heading="Four subscriptions, one bill, half the spend"
      description="Scheduling, records, messaging, and billing arrive together, so the finance review stops being an archaeology project."
      button={{ label: "See what you would save", href: "/pricing" }}
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      media={
        <Money23
          label="Estimated saving"
          amount="$1,840"
          period="per month"
          delta="38% lower"
          rows={[
            { label: "Four tools today", amount: "$4,820", muted: true },
            { label: "One workspace", amount: "$2,980" },
          ]}
        />
      }
    />
  );
}

Props

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

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

Behavior notes

• The section opens with pt-16 but has no bottom padding of its own. The breathing room underneath comes from the pb-16 on the overlapping card wrapper, so the card's own offset is what sets the section's closing rhythm.
• The overlap is a negative margin, not absolute positioning: the card row is pulled up by -mt-16 on mobile and md:-mt-24, and carries z-10 so it sits over the band. Because it stays in flow, the section still reserves the right amount of height for it.
• The card is centered below md and pushed left with md:justify-start md:pl-12 from md up, which stops it from covering the middle of the photograph on wide screens.
• The header row uses md:items-end, so the paragraph and action align to the baseline of the heading rather than the top of the row. md:pb-2 nudges the column down to compensate for the heading's line height.
• The right column is flex flex-col items-start, so Button21 keeps its intrinsic width. md:items-end then flips the whole column to the right edge on wide screens, action included.
• The band is a fixed height at each breakpoint (h-72, then md:h-[28rem]) rather than an aspect ratio, so the overlap distance stays predictable no matter what the image is.