Framed Poster HeroPRO

Hero155: Framed Poster Hero

A full-bleed photograph with a hairline frame inset into it. The eyebrow and availability line sit along the top of the frame, the statement in the middle, and the paragraph, notes, CTA and image credit along the bottom.

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

Base UI flavor

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

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

Quick start

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

import { Hero155, hero155Demo } from "@/components/beste/block/hero155";

export default function Page() {
  return <Hero155 {...hero155Demo} />;
}

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

import { Hero155 } from "@/components/beste/block/hero155";

export default function Page() {
  return (
    <Hero155
      badge={{ label: "Auralis, est. 2014" }}
      heading="Printed, built and photographed by the same nine people."
      description="No production partners and no outsourced studio."
      button={{ label: "Put us on your project", href: "/contact" }}
      image={{ src: "/work/facade.jpg", alt: "Glass and steel building front" }}
      labels={{ availability: "Two slots, autumn", imageCredit: "Kestrel Group, west facade" }}
      notes={[
        { title: "Disciplines", value: "Identity, print, screen" },
        { title: "Studio", value: "Rotterdam" },
      ]}
    />
  );
}

Props

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

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

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

type Hero155Labels = {
  availability?: string;
  imageCredit?: string;
};

Behavior notes

• The frame is a border-background/40 rule on an inner element inset by the section's own padding (p-4 growing to md:p-8), so the photograph bleeds to the edge while the content sits inside a printed margin.
• That inner element is flex-1 with justify-between, which is what pins the eyebrow row to the top and the closing row to the bottom no matter how tall the section grows.
• The statement uses vertical margins rather than a spacer (my-16 becoming md:my-20), so it stays optically centred between the two pinned rows.
• The bottom row is md:items-end and the CTA column switches to md:items-end, so the button and credit align to the right edge on desktop and fall back to the left on a phone.
• Copy tokens are fixed background shades rather than adaptive ones, correct for a surface that is a dark photograph in both themes.
• Notes render as a real dl on border-background/30 rules, a shade of the copy colour rather than the theme border, so they belong to the frame.
• The picture is a real img with an alt behind -z-10, not a CSS background, so it remains meaningful to assistive technology and image search.