Multi-Site Coverage CTA

Cta90: Multi-Site Coverage CTA

A closing call to action on a soft section that sets an image tile floating a live coverage card against three labelled columns of places, with the action under a hairline.

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

Base UI flavor

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

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

Quick start

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

import { Cta90, cta90Demo } from "@/components/beste/block/cta90";

export default function Page() {
  return <Cta90 {...cta90Demo} />;
}

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

import { Cta90 } from "@/components/beste/block/cta90";
import { Location8 } from "@/components/beste/piece/location8";

export default function Page() {
  return (
    <Cta90
      badge={{ label: "Where we already run" }}
      heading="Add the second site without asking anyone's permission"
      description="Sites are a setting rather than a contract change."
      media={
        <Location8
          title="Sites on this plan"
          region="United Kingdom"
          sites={[
            { name: "Bramble Health", meta: "Bristol", value: "6 rooms" },
            { name: "Kingsway Clinic", meta: "Leeds", value: "4 rooms" },
          ]}
          total="13"
          totalLabel="rooms live across three sites"
        />
      }
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
      regions={[
        { label: "England", places: ["Bristol", "Leeds", "Southampton"] },
        { label: "Scotland and Wales", places: ["Glasgow", "Cardiff"] },
        { label: "Ireland", places: ["Dublin", "Cork", "Galway"] },
      ]}
      button={{ label: "Talk about a group rollout", href: "/contact" }}
      finePrint="Data stays in the region you choose."
    />
  );
}

Props

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

type RegionColumn = {
  label: string;
  places: string[];
};

Behavior notes

• The section is bg-muted and the tile is bg-background, so the tile reads as raised against the section rather than recessed into it.
• Region columns are lists of plain strings, not links. This block is for showing coverage rather than for navigating to per-location pages.
• Each region's label carries the border-t, so the hairline belongs to the heading rather than sitting above the group as a separate divider.
• Region columns go three-up from sm, not md, because place names are short enough to fit early. Column lengths are not balanced, so a five-item column simply runs longer than a three-item one.
• The main row is a 1fr to 1.4fr split, giving the region columns more width than the tile, since three columns of names need more room than one card.
• The closing group carries the section's only full-width hairline and is items-start, so Button21 keeps its intrinsic width with the fine print underneath at the same left edge.