Gradient Beam Card
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"
/>Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
Pro blocks drop monthly
A new themed set of sections lands every month, with free updates forever.
Learn moreimport { Card9 } from "@/components/beste/component/card9";
<Card9
badge="Featured"
title="Pro blocks drop monthly"
description="A new themed set of sections lands every month, with free updates forever."
href="#"
/>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 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.
Ship in minutes
Copy a block, wire up your content, and deploy. No boilerplate, no configuration, no lock in.
Learn moreSpotlight Feature Card
A feature card with an icon tile and a cursor tracking spotlight for landing page feature grids.
Portfolio Card
A portfolio card with a full bleed image, hover zoom, and gradient title overlay for work showcases.
Deniz Arslan
Creative Director
Leads brand systems for venture backed startups. Previously at North & Co.
View profileTeam Reveal Card
A team member card with a grayscale portrait that gains color on hover while a bio drawer slides up.
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.