Gradient Beam Card

About this component

A featured callout card wrapped in an orbiting gradient border beam for highlights and announcements.

Usage

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

import { Card9 } from "@/components/beste/component/card9";
import { Crown } from "lucide-react";

// The whole card becomes a link when href is set.
<Card9
  badge="Featured"
  title="Pro blocks drop monthly"
  description="A new themed set of sections lands every month."
  href="/pricing"
/>

<Card9
  icon={Crown}      // tile icon (default: Gem)
  title="Lifetime deal"
  description="Pay once, keep every future update."
  linkLabel="See pricing"
  tone="aurora"     // beam: "primary" (default) | "aurora"
/>

Props

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

Prop	Type	Default	Description
`icon`	`LucideIcon`	—	Icon in the leading tile (defaults to Gem)
`badge`	`string`	—	Small chip above the title (e.g. "Featured")
`title`*	`string`	—	Card title
`description`*	`string`	—	Card body text
`href`	`string`	—	If set, the whole card links to this href and shows the link row
`linkLabel`	`string`	—	Link row label (defaults to "Learn more")
`tone`	`"primary" \| "aurora"`	—	Beam colors: primary sweep (default) or an aurora mix
`className`	`string`	—	Additional classes merged onto the root

More Card components

View all Card

Pro

$19/month

For freelancers shipping client sites.

Unlimited projects
1,400+ blocks and components
Lifetime updates
Priority support

No credit card required

Brand identityNordwind Studio

Ship in minutes

Copy a block, wire up your content, and deploy. No boilerplate, no configuration, no lock in.

Learn more