Hero147: Discipline Ledger Hero

Editorial hero for a studio or practice: an oversized statement and a paragraph sit beside a ruled index of the disciplines you take on, with a pill CTA under the copy and a wide cinematic image band closing the section on its own caption rule.

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

Base UI flavor

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

This installs the block to components/beste/block/hero147.tsx plus the badge7 eyebrow and button12 pill button it uses.

Quick start

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

import { Hero147, hero147Demo } from "@/components/beste/block/hero147";

export default function Page() {
  return <Hero147 {...hero147Demo} />;
}

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

import { Hero147 } from "@/components/beste/block/hero147";

export default function Page() {
  return (
    <Hero147
      badge={{ label: "Design practice" }}
      heading="A studio for the parts nobody wants to own."
      description="We take the messy middle of a brand and finish it."
      button={{ label: "Start a commission", href: "/contact" }}
      disciplines={[
        { title: "Identity", description: "Marks, type systems and the rules that keep them alive." },
        { title: "Editorial", description: "Long-form pages that survive being read." },
      ]}
      image={{ src: "/studio/table.jpg", alt: "Printed layouts across a studio table" }}
      labels={{ imageCaption: "Second week of a rebrand.", imageCredit: "Studio floor, Rotterdam" }}
    />
  );
}

Props

type Discipline = {
  title: string;
  description: string;
};

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

type Hero147Labels = {
  disciplinesTitle?: string;
  imageCaption?: string;
  imageCredit?: string;
};

Behavior notes

• The two columns align on md:items-end, so the discipline index sits on the same baseline as the CTA rather than floating next to the top of a very tall heading.
• Discipline titles render as h2 under the h1, which keeps the outline correct when this block opens a page and the index doubles as a section summary.
• The image band switches aspect ratio rather than height: aspect-[16/9] on mobile becomes aspect-[21/9] from md up, so the crop stays cinematic on desktop without going letterbox-thin on a phone.
• Caption and credit share one border-t row under the image and wrap independently, so a long caption never pushes the credit out of the section.
• Every part is optional: without image the block ends after the two columns, and without disciplines the heading column simply takes the full width.