Full Bleed Fact Rail HeroPRO

Hero149: Full Bleed Fact Rail Hero

A full-bleed photographic hero: the picture fills the section, the statement sits at the foot with the outline CTA opposite its paragraph, and a rail of ruled facts closes the frame.

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

Base UI flavor

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

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

Quick start

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

import { Hero149, hero149Demo } from "@/components/beste/block/hero149";

export default function Page() {
  return <Hero149 {...hero149Demo} />;
}

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

import { Hero149 } from "@/components/beste/block/hero149";

export default function Page() {
  return (
    <Hero149
      badge={{ label: "Commissions" }}
      heading="We photograph the work before we ever explain it."
      description="Pictures first, arguments second."
      button={{ label: "See the current work", href: "/work" }}
      image={{ src: "/studio/stairwell.jpg", alt: "Concrete stairwell lit from one window" }}
      facts={[
        { title: "Working since", value: "2014" },
        { title: "Cities", value: "Rotterdam, Lisbon" },
        { title: "Open slots", value: "Two this autumn" },
      ]}
    />
  );
}

Props

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

type HeroFact = {
  title: string;
  value: string;
};

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

Behavior notes

• The photograph is a real img with an alt behind -z-10, not a CSS background, so it still carries meaning for assistive technology and image search.
• A flat bg-foreground/60 wash sits over the picture rather than a gradient, because content runs from the eyebrow at the top of the copy block down to the facts and needs even contrast the whole way.
• The section is justify-end with min-h-[600px] growing to md:min-h-[760px], so the copy stays anchored to the bottom of the frame at any height.
• Every text token inside is a fixed background shade rather than an adaptive one, which is correct here: the surface is a dark photograph in both themes, so it does not follow the theme.
• The Badge7 is passed className="text-background/70" for the same reason, keeping the eyebrow legible on the picture.
• The paragraph row is md:items-end with the button wrapper md:justify-end, so the CTA lands on the paragraph's last baseline at the right edge and drops beneath it on a phone.
• Facts render as a real dl on rules of border-background/30, a shade of the copy colour rather than the theme border token, so the rail belongs to the picture.