Realestate18: Statement Hero without Photo

A typographic development hero with no imagery at all: a rule eyebrow, a huge two-line sans headline, one long hairline that draws across the page, then three columns (What, Where, When) each with a small label, a light figure and a line of text, and two pill buttons rising in last. It suits the top of a page that opens on words before any picture, or a launch page that has no photography yet.

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://beste.dev/r/realestate18?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/realestate18?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/realestate18.tsx plus the badge24 rule eyebrow, the button25 pill behind both buttons, and the shadcn/ui button primitive they build on.

Quick start

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

import { Realestate18, realestate18Demo } from "@/components/beste/block/realestate18";

export default function Page() {
  return <Realestate18 {...realestate18Demo} />;
}

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

import { ArrowRight } from "lucide-react";
import { Realestate18 } from "@/components/beste/block/realestate18";

export default function Page() {
  return (
    <Realestate18
      eyebrow="Alder Row, Riverside"
      heading="Twenty-four homes, one old warehouse and a courtyard of birch."
      columns={[
        { label: "What", value: "24 homes", description: "Two, three and four bedroom apartments and one penthouse." },
        { label: "Where", value: "6 min", description: "On the river walk, a six minute stroll from Mill Lane station." },
        { label: "When", value: "Spring 2027", description: "Completion of the warehouse homes; the courtyard wing launches on 14 March 2027." },
      ]}
      buttons={[
        { label: "Register your interest", href: "/register", icon: ArrowRight },
        { label: "Download the brochure", href: "/brochure", tone: "outline" },
      ]}
    />
  );
}

Props

type Column = {
  label: string;
  value: string;
  description: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "dark" | "outline" | "primary" | "neutral";
  icon?: LucideIcon;
};

Behavior notes

• Everything animates on mount in one sequence: the eyebrow's rule draws, the headline rises at 0.1 s, the long hairline grows from the left over 1.6 seconds from 0.3 s, the columns rise from 0.45 s at 0.12 s intervals and the buttons come last, timed after the final column.
• The columns are a dl: each label is a dt, and the figure and line share one dd, so the three facts read as definitions to assistive technology.
• The headline is capped at max-w-6xl so that it breaks into two lines on wide screens; the figures use the light tabular figure style shared across the set.
• There is no image, so the hero has nothing to load-gate; the only gating is prefers-reduced-motion, which skips every entrance and renders the hairline at full width.