CTA Card
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"
/>Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
Ready when you are
Start building today
Copy your first block in under a minute. No account needed.
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. No account needed."
cta="Browse blocks"
href="#"
secondaryCta="See pricing"
secondaryHref="#"
/>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 |
More Card components
View all CardPro
For freelancers shipping client sites.
- Unlimited projects
- 1,400+ blocks and components
- Lifetime updates
- Priority support
No credit card required
Pricing Card
A complete pricing card with feature list, highlighted state, floating badge, and call to action.
Join the beta program
We are opening a short testing window for the new builder. Help shape it before launch.
Only 25 seats
Applications close Jul 18.
Promo Card
A dismissible promo card with image, deadline line, and apply button for programs and offers.
The new landing page is live!
Already? That was two days of work at most
Blocks. It is all blocks.
Chat Card
A chat conversation card with message bubbles and a typing indicator for testimonials and support sections.
Pro blocks drop monthly
A new themed set of sections lands every month, with free updates forever.
Learn moreGradient Beam Card
A featured callout card wrapped in an orbiting gradient border beam for highlights and announcements.
Brand systems
Brand systems
Identity, guidelines, and design tokens that scale across every touchpoint of your product.
Flip Card
A 3D flip card that rotates on hover to reveal details and a link for service and feature grids.