Staaarter

Multi-Card CTA

Multiple action cards with different tiers or options side by side, each with its own icon, title, short description, and button. Perfect for offering multiple paths like starting a free trial, booking a demo, and talking to sales.

By Staaarter Team
CTA
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/multi-card-cta.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta13.tsx instead.

Usage

The file also exports cta13Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Cta13, cta13Demo } from "@/components/blocks/cta/cta13";

export default function Page() {
  return <Cta13 {...cta13Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Choose how you'd like to get started"Heading above the cards.
descriptionstring"Pick the path that fits your team, you can always switch later."Short supporting copy under the heading.
cardsCtaCard[]noneThe action cards, each with its own icon, copy, and button.
classNamestringnoneExtra classes for the outer section element.

Types

interface CtaCard {
  icon: LucideIcon;
  title: string;
  description: string;
  buttonLabel: string;
  buttonHref: string;
}

Behavior notes

  • Purely presentational: a centered heading and description above a 3-column grid of cards (stacks to 1 column on mobile).
  • Each card's button is an inert link (`render={<Link/>}`) pointing at its own `buttonHref`, defaulting to `#`; there is no real trial-start, booking, or sales flow wired up.
  • Icons are passed as `LucideIcon` component references in the `cards` prop since this is a server component; a client version could not accept a function prop this way.