Contact And Availability CTAPRO

Cta86: Contact And Availability CTA

A closing call to action splitting a bordered container between a hairline contact table and an inverted dark column that floats a live card naming the person you will meet above the booking action.

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

Base UI flavor

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

This installs the block to components/beste/block/cta86.tsx, the card31 person piece it floats in the dark column (installed to components/beste/piece/card31.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Cta86, cta86Demo } from "@/components/beste/block/cta86";

export default function Page() {
  return <Cta86 {...cta86Demo} />;
}

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

import { Card31 } from "@/components/beste/piece/card31";
import { Cta86 } from "@/components/beste/block/cta86";

export default function Page() {
  return (
    <Cta86
      badge={{ label: "Talk to a person" }}
      heading="Pick a morning and we will bring the workspace to you"
      description="Half an hour, your own data if you want it, and an engineer rather than a salesperson."
      contacts={[
        { label: "Email", value: "hello@example.com" },
        { label: "Phone", value: "+44 20 7946 0812" },
        { label: "Response", value: "Within one working day" },
      ]}
      mediaTitle="Who you will actually meet"
      media={
        <Card31
          avatar={{ src: "/people/priya.jpg", alt: "Portrait of Priya Nandan" }}
          name="Priya Nandan"
          role="Migration engineer"
          status="Free from 09:30 today"
          availability="free"
          rows={[
            { label: "Call length", value: "30 minutes" },
            { label: "Based in", value: "Bristol, UK" },
          ]}
        />
      }
      button={{ label: "Book a slot", href: "/demo" }}
      finePrint="Prefer email? Write to us and we will reply with three times that suit you."
    />
  );
}

Props

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

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

Behavior notes

• The container is one bordered box holding two surfaces: a transparent left column and a bg-foreground right column. The overflow-hidden on the container is what clips the dark fill to the rounded corner rather than letting it square off.
• Text in the dark column uses fixed background tokens, since the surface is fixed. The left column uses the normal adaptive tokens.
• Contact rows carry border-t only, with no last:border-b, so the table stays open at the bottom and reads as continuing into the column rather than closing it off.
• Rows use flex-wrap with items-baseline, so a long value wraps below its label on narrow columns instead of squeezing the label.
• The dark column is flex flex-col justify-between, which pins the action group to the bottom regardless of how tall the asset is. On a short card the gap grows above the button rather than leaving it floating mid-column.
• The action group is items-start, so Button21 keeps its intrinsic width and the fine print sits under it at the same left edge.
• The split is lg:grid-cols-2, so the two columns stack below lg with the dark column landing second.