Slim Closing Bar

Cta88: Slim Closing Bar

A short closing call to action held in one soft bar, with an eyebrow badge, a compact light heading and paragraph on the left, and the actions aligned to the right.

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

Base UI flavor

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

This installs the block to components/beste/block/cta88.tsx plus the badge23 and button21 components it uses for the eyebrow and the actions.

Quick start

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

import { Cta88, cta88Demo } from "@/components/beste/block/cta88";

export default function Page() {
  return <Cta88 {...cta88Demo} />;
}

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

import { Cta88 } from "@/components/beste/block/cta88";

export default function Page() {
  return (
    <Cta88
      badge={{ label: "Still reading" }}
      heading="Bring one clinic across and keep the rest as they are"
      description="Thirty minutes, your own data, and an engineer rather than a salesperson."
      buttons={[
        { label: "Book a demo", href: "/demo" },
        { label: "See pricing", href: "/pricing", tone: "outline" },
      ]}
    />
  );
}

Props

type ButtonTone = "primary" | "neutral" | "outline";

type ActionLink = {
  label: string;
  href: string;
  tone?: ButtonTone;
};

Behavior notes

• This is the set's short call to action, so the section padding is deliberately lighter (py-12, then md:py-16) than the py-16 md:py-24 every other block uses. It is meant to sit between two full sections without competing with them.
• The heading is text-2xl, then md:text-3xl, rather than the usual display scale, which is what keeps the bar one row tall on desktop.
• The copy column carries min-w-0 so a long heading wraps inside the flex row instead of pushing the actions off the edge.
• The action group is shrink-0, so the buttons keep their full width and the heading gives way first when space is tight.
• Below md the bar becomes a column with the actions underneath, and flex-wrap lets two buttons sit side by side or stack depending on their labels.
• Button tones fall back positionally: tone is honored when set, otherwise the first button renders primary and every later one renders outline.