Editorial Split Hero

Hero112: Editorial Split Hero

Studio-style two-column hero: an eyebrow label, a two-line, two-tone headline (bold black text with a muted second line), a short paragraph, a primary pill button plus a bordered secondary link, and a tall portrait image on the other side. A client wordmark strip runs beneath the fold once a logo list is supplied.

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

Base UI flavor

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

This installs the block to components/beste/block/hero112.tsx, the badge6 component it uses for the eyebrow label, the button1 component it uses for the primary CTA pill, and their dependencies.

Quick start

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

import { Hero112, hero112Demo } from "@/components/beste/block/hero112";

export default function Page() {
  return <Hero112 {...hero112Demo} />;
}

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

import { Hero112 } from "@/components/beste/block/hero112";

export default function Page() {
  return (
    <Hero112
      label="Independent Studio"
      heading="We design brands<br /><strong>that outlast trends</strong>."
      description="A small studio for founders who want the work to speak first."
      buttons={[
        { label: "Start a project", href: "https://beste.co", variant: "primary" },
        { label: "View our work", href: "https://beste.co", variant: "outline" },
      ]}
      image={{
        src: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=900&h=1200&fit=crop",
        alt: "Studio team reviewing a brand direction",
      }}
      clientsLabel="Trusted by"
      clients={["Lumen", "Verdant", "Orbit"]}
    />
  );
}

Props

type ButtonItem = {
  label: string;
  href: string;
  variant?: "primary" | "outline";
};

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

Behavior notes

• heading is injected via dangerouslySetInnerHTML, so it accepts both a literal <br /> for the line break between the two headline lines and a <strong> wrapper for the muted second phrase; there are no separate line/highlight props.
• Only the primary button variant renders through the Button1 seal-arrow pill; outline buttons are a hand-styled bordered Link, not a second Button1 tone, so their hover and focus treatment differs slightly from the primary pill.
• The client strip only renders when clients is non-empty; it sits below a border-t divider and lays the label and wordmarks out in a row on md screens, stacked on mobile.
• The image column is a fixed aspect-[3/4] portrait box with object-cover, so it always crops to that ratio regardless of the source image's dimensions.
• There is no animation; every element is present at first paint.