Pricing tier with a headline amount, period, and a stack of check-marked features. Featured tier flips to primary.
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Card8 } from "@/components/beste/component/card8";
<Card8
name="Studio"
price="$39"
period="per month"
features={["Unlimited blocks","Team workspaces","Priority support"]}
featured
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Hover | The card lifts and the image scales inside its frame; `motion-reduce` turns the movement off. |
|---|
The import and the props worth knowing about, in one place.
import { Card8 } from "@/components/beste/piece/card8";
<Card8
name="Studio"
price="$39"
period="per month"
features={[
"Unlimited blocks",
"Team workspaces",
"Priority support"
]}
featured={true}
/>Standard plan tile with a uppercase name, big price, tagline, four feature bullets, and an outline CTA.
Highlighted plan with a gradient border, Most popular badge on top, and a filled gradient CTA button.
Inverted plan card in foreground paint, showing enterprise callouts and a contact-sales CTA.
Consumption plan card with a per-unit rate, a bubble of included volume, and an overage note below.