CTA Card

About this component

A call to action card with eyebrow, title, description, and buttons for section endings and banners.

Usage

The import and the props worth knowing about, in one place.

import { Card24 } from "@/components/beste/component/card24";

<Card24
  eyebrow="Ready when you are"
  title="Start building today"
  description="Copy your first block in under a minute."
  cta="Browse blocks"
  href="/blocks"
  secondaryCta="See pricing"
  secondaryHref="/pricing"
/>

<Card24
  title="Join the newsletter"
  description="One email a month, only the good stuff."
  cta="Subscribe"
  href="/newsletter"
  tone="dark"   // "muted" (default) | "dark" | "primary"
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`eyebrow`	`string`	—	Small eyebrow above the title
`title`*	`string`	—	Card title
`description`	`string`	—	Supporting text under the title
`cta`*	`string`	—	Main button label
`href`*	`string`	—	Main button link
`secondaryCta`	`string`	—	Optional secondary link label
`secondaryHref`	`string`	—	Secondary link
`tone`	`"muted" \| "dark" \| "primary"`	—	Surface tone
`className`	`string`	—	Additional classes merged onto the root