Hero125: Hero with Portrait Gallery

Centered intro (eyebrow, heading, description, CTA) above a responsive gallery of portrait-ratio images that reflows from one column on mobile to three across on desktop, each image captioned underneath.

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

Base UI flavor

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

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

Quick start

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

import { Hero125, hero125Demo } from "@/components/beste/block/hero125";

export default function Page() {
  return <Hero125 {...hero125Demo} />;
}

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

import { Hero125 } from "@/components/beste/block/hero125";

export default function Page() {
  return (
    <Hero125
      badge={{ label: "Selected output" }}
      heading="Proof lives in the <strong>work</strong>."
      description="We don't pitch decks of promises. Three recent builds, shot exactly as they shipped."
      button={{ label: "See the full archive", href: "https://beste.co" }}
      images={[
        {
          src: "https://images.unsplash.com/photo-1734171672754-57be2280c454?w=800&auto=format&fit=crop",
          alt: "Editorial brand system printed across a folded poster set",
          caption: "Marble & Ash — identity",
        },
        {
          src: "https://images.unsplash.com/photo-1602006688561-281c0241ef28?w=800&auto=format&fit=crop",
          alt: "Product capsule photographed on a neutral studio sweep",
          caption: "Form Supply — art direction",
        },
      ]}
    />
  );
}

Props

type Badge = { label: string };
type ActionButton = { label: string; href: string };
type Hero125Image = { src: string; alt: string; caption: string };

Behavior notes

• The gallery grid is grid-cols-1 sm:grid-cols-2 lg:grid-cols-3, so the same images array reflows from a single column on mobile to three across at lg without any prop controlling column count directly.
• Every image sits in a fixed aspect-[3/4] portrait box with object-cover, so source photos of different native ratios still line up evenly across the grid.
• Captions render as plain text below each image box (not overlaid on the photo), and always show regardless of whether the image itself has loaded.
• Gallery images are presentation-only: there is no lightbox, click handler, or wrapping link on any of them.