Plain Terms Billing CTAPRO

Cta89: Plain Terms Billing CTA

A closing call to action held in one bordered container, with the promise and action across the top and a hairline split below pairing an image tile that floats a live payment card with a full table of billing terms.

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

Base UI flavor

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

This installs the block to components/beste/block/cta89.tsx, the receipt3 payment piece it floats on the tile (installed to components/beste/piece/receipt3.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Cta89, cta89Demo } from "@/components/beste/block/cta89";

export default function Page() {
  return <Cta89 {...cta89Demo} />;
}

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

import { Cta89 } from "@/components/beste/block/cta89";
import { Receipt3 } from "@/components/beste/piece/receipt3";

export default function Page() {
  return (
    <Cta89
      badge={{ label: "Billing, in plain words" }}
      heading="You pay when the first clinic is taking real bookings"
      description="Not when you sign, and not when someone finishes a training session."
      button={{ label: "Start free", href: "/signup" }}
      media={
        <Receipt3
          status="Payment received"
          amount="$1,240.00"
          caption="Bramble Health · May care plan"
          rows={[{ label: "Method", value: "Visa ending 4417" }]}
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      termsLabel="The terms, all of them"
      terms={[
        { label: "Billing period", value: "Monthly, in arrears" },
        { label: "Minimum term", value: "None" },
        { label: "Data export", value: "Any time, full fidelity" },
      ]}
      finePrint="Seats can go up or down mid-month and we prorate both directions."
    />
  );
}

Props

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

type TermRow = {
  label: string;
  value: string;
};

Behavior notes

• The seam between the two lower cells is gap-px over a bg-border container with bg-card cells, so the divider is the background showing through rather than a border on either cell. That keeps it a single hairline at the join instead of two stacked rules.
• Both lower cells are flex flex-col and their contents are flex-1, which is what makes the tile grow to match the terms table beside it. The tile uses min-h-64 rather than a fixed height so it can stretch rather than crop.
• Terms rows use border-t with first:border-t-0 first:pt-0, so the table opens flush under its label with no leading rule.
• finePrint carries its own border-t and top padding, which closes the terms table and separates the caveat from the rows above it.
• The header row is md:items-end, so the action aligns to the baseline of the paragraph rather than the top of the block, and shrink-0 keeps the button at full width while the heading wraps.
• The lower split is lg:grid-cols-2, so on tablet the tile stacks above the terms table rather than squeezing both into half the width.