Resource Rows CTA

Cta87: Resource Rows CTA

A closing call to action that offers three downloadable resources as full-width hairline rows, each a link with a short kicker, a format note and an arrow that shifts on hover.

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

Base UI flavor

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

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

Quick start

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

import { Cta87, cta87Demo } from "@/components/beste/block/cta87";

export default function Page() {
  return <Cta87 {...cta87Demo} />;
}

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

import { Cta87 } from "@/components/beste/block/cta87";

export default function Page() {
  return (
    <Cta87
      badge={{ label: "Before you decide" }}
      heading="Take the homework with you"
      description="Three things practices asked us for often enough that we wrote them down properly."
      resources={[
        {
          kicker: "Guide",
          title: "Migrating without closing for a week",
          description: "The export, mapping, and dry-run sequence in full.",
          meta: "14 pages · PDF",
          href: "/downloads/migration-guide.pdf",
        },
        {
          kicker: "Checklist",
          title: "What to have ready before day one",
          description: "Rooms, rotas, insurers, and access levels, in order.",
          meta: "One page",
          href: "/downloads/checklist.pdf",
        },
      ]}
      button={{ label: "Or just book a demo", href: "/demo" }}
      finePrint="Everything above downloads directly."
    />
  );
}

Props

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

type Resource = {
  kicker: string;
  title: string;
  description: string;
  meta: string;
  href: string;
};

Behavior notes

• Each row is a whole Link, not a card with a link inside it, so the entire row is one target. Everything inside is a span rather than a block element, which is what keeps that markup valid.
• The hover arrow uses a named group, group/cta87, rather than the bare group class, so nesting this block inside another grouped component will not trigger both animations at once.
• The arrow shift is wrapped in motion-safe:, so it is skipped for anyone who has asked their system to reduce motion.
• Rows are flex-col on mobile and md:flex-row md:items-center, so the kicker, title and format note stack vertically on small screens and line up as columns from md.
• Rows use border-t with last:border-b, closing the list at the bottom.
• The closing group is items-start, so Button21 keeps its intrinsic width and the fine print sits under it at the same left edge.
• meta is free text and holds whatever the format note should be, for example a page count and file type. Nothing is parsed or validated.