Typographic Card Hero

Hero122: Typographic Card Hero

Centered typographic hero fully enclosed inside a single muted, rounded panel rather than sitting directly on the page background: an oversized heading, one CTA, and a bottom row of up to three short meta labels joined by bullet separators.

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

Base UI flavor

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

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

Quick start

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

import { Hero122, hero122Demo } from "@/components/beste/block/hero122";

export default function Page() {
  return <Hero122 {...hero122Demo} />;
}

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

import { Hero122 } from "@/components/beste/block/hero122";

export default function Page() {
  return (
    <Hero122
      badge={{ label: "Now booking" }}
      button={{ label: "Check availability", href: "https://beste.co" }}
      labels={{
        metaOne: "Studio of two",
        metaTwo: "Q3 availability",
        metaThree: "Remote, GMT+1",
      }}
      heading="Big ideas, <strong>quietly executed.</strong>"
      description="We are a small studio that trades loud reveals for considered work."
    />
  );
}

Props

type Badge = { label: string };
type ActionButton = { label: string; href: string };
type Hero122Labels = {
  metaOne?: string;
  metaTwo?: string;
  metaThree?: string;
};

Behavior notes

• The meta row is built from three fixed slots (metaOne, metaTwo, metaThree), run through .filter(Boolean) before rendering, so any missing slot collapses cleanly instead of leaving an empty gap or a stray bullet.
• A • separator is inserted before every rendered meta item except the first one, so the separator count always tracks the number of labels actually supplied, not a fixed count of three.
• Unlike the other heroes in this family, the entire intro (badge, heading, description, CTA, meta row) lives inside one bg-muted rounded-md panel with its own internal padding, rather than directly on the page background.
• heading is capped at md:text-5xl lg:text-6xl, a smaller ceiling than the lg:text-7xl used by the plain full-bleed heroes in this set, since it has to fit inside the card.