Quiet One Line Call to Action

Realestate60: Quiet One Line Call to Action

The smallest call to action in the set: one line of heading on the left and a single pill button on the right, held between two hairlines that draw across as the strip enters the viewport. There is no eyebrow and no paragraph, so it sits quietly between larger sections; on small screens the button drops under the line.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate60.tsx together with the button25 pill component and the shadcn/ui button primitive behind it.

Quick start

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

import { Realestate60, realestate60Demo } from "@/components/beste/block/realestate60";

export default function Page() {
  return <Realestate60 {...realestate60Demo} />;
}

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

import { Realestate60 } from "@/components/beste/block/realestate60";
import { ArrowRight } from "lucide-react";

export default function Page() {
  return (
    <Realestate60
      heading="The sales suite is open today until 6. Come and see the show apartment."
      button={{ label: "Book a viewing", href: "/viewing", icon: ArrowRight }}
    />
  );
}

Props

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

Behavior notes

• The section padding is tighter than the rest of the set (py-12 to py-16) because the strip is meant to sit between larger sections rather than be one.
• The top hairline scales in from the left over 1.2 seconds as soon as the strip is 10% inside the viewport; the bottom one follows 0.2 seconds later.
• The heading rises at 0.1 seconds and the button at 0.25 seconds, in the same 16 pixel rise as every other block in the set.
• The heading is capped at max-w-3xl so a long line wraps on the left while the button keeps its place on the right; the button never shrinks.
• With prefers-reduced-motion both hairlines, the heading and the button render in their final state.