Split Hero with Stats

Hero121: Split Hero with Stats

Split hero with a badge, heading, description and a single CTA in a wide left column, paired against a right-hand rail of stacked stat rows separated by top borders, closed out with a wide 21:9 image strip spanning the full width below both columns.

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

Base UI flavor

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

This installs the block to components/beste/block/hero121.tsx, the badge7 eyebrow badge and button12 CTA button it renders through, and its dependencies.

Quick start

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

import { Hero121, hero121Demo } from "@/components/beste/block/hero121";

export default function Page() {
  return <Hero121 {...hero121Demo} />;
}

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

import { Hero121 } from "@/components/beste/block/hero121";

export default function Page() {
  return (
    <Hero121
      badge={{ label: "Studio, est. 2014" }}
      heading="We make the work that <strong>makes the difference</strong>."
      description="A small studio of writers, designers and editors who treat brand as a craft, not a deliverable."
      button={{ label: "Book the studio", href: "https://beste.co" }}
      stats={[
        { value: "12 yrs", title: "Building brands that outlive the brief" },
        { value: "84", title: "Identities shaped end to end" },
      ]}
      imageSrc="https://images.unsplash.com/photo-1750406872634-1223dd881104?w=2000&auto=format&fit=crop"
      imageAlt="Studio workspace with desks and natural light"
    />
  );
}

Props

type Badge = { label: string };
type ActionButton = { label: string; href: string };
type Hero121Stat = { value: string; title: string };

Behavior notes

• Stat rows sit inside a flex flex-col justify-end list, pushing them toward the bottom of the right column so the last stat lines up with the bottom of the text column on the left.
• Rows are separated with border-t border-border, and first:border-t-0 drops the divider on the top-most stat no matter how many entries stats holds.
• The two-column split (lg:grid-cols-[1.5fr_1fr]) only activates at lg; below that breakpoint the stat rail simply flows underneath the heading column in document order.
• The 21:9 image strip is a separate full-width block placed after the grid, not inside either column, and is omitted entirely when imageSrc is not set.
• Only a single button prop is supported (not an array), so this hero always shows exactly one CTA, styled with Button12's default dark tone.