Editorial Split Hero

Hero143: Editorial Split Hero

Light editorial hero with an oversized display heading on the left and an offset paragraph plus accent button pinned to the bottom of the right column, both aligned along a shared baseline, followed by a full-bleed photo band below the fold.

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

Base UI flavor

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

This installs the block to components/beste/block/hero143.tsx, the button21 component it uses for the CTA, and its dependencies.

Quick start

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

import { Hero143, hero143Demo } from "@/components/beste/block/hero143";

export default function Page() {
  return <Hero143 {...hero143Demo} />;
}

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

import { Hero143 } from "@/components/beste/block/hero143";

export default function Page() {
  return (
    <Hero143
      heading="One workspace for modern care teams"
      description="Intake, scheduling, records, and billing in a single surface."
      button={{ label: "Book a demo", href: "https://beste.co" }}
      image={{
        src: "https://images.unsplash.com/photo-1782849324101-3ae636a0e270?w=2000&fit=crop",
        alt: "A healthcare professional smiling in a bright clinic",
      }}
    />
  );
}

Props

Behavior notes

• The heading and the description/button column share a md:grid-cols-2 md:items-end grid, so on desktop both blocks sit on the same bottom baseline even though the heading is much taller; on mobile they stack with normal top-to-bottom flow.
• The heading uses font-light at a scale up to text-7xl on lg, distinctly thinner than the bold, all-caps-eyebrow style used across the Auralis hero set (hero139-142), matching this block's lighter editorial register instead.
• The image band is a separate, unconstrained full-width strip below the content grid (h-72 to md:h-[28rem]), not part of the max-w-7xl container the heading/description sit in, so it bleeds edge to edge while the text above stays margined.
• Button21's trailing icon (when supplied) nudges 2px to the right on hover via a motion-safe transform; the demo does not pass an icon, so the button renders as a plain solid pill.