Highlighted plan with a gradient border, Most popular badge on top, and a filled gradient CTA button.
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Card12 } from "@/components/beste/component/card12";
<Card12
name="Growth"
price="$48"
period="/ mo"
tagline="For teams growing past launch."
features={["Unlimited editors","250 GB storage","Realtime analytics"]}
action="Start Growth"
tone="primary"
/>The import and the props worth knowing about, in one place.
import { Card12 } from "@/components/beste/piece/card12";
<Card12
name="Growth"
price="$48"
period="/ mo"
tagline="For teams growing past launch."
features={[
"Unlimited editors",
"250 GB storage",
"Realtime analytics"
]}
action="Start Growth"
tone="primary"
/>Inverted plan card in foreground paint, showing enterprise callouts and a contact-sales CTA.
Pricing tier with a headline amount, period, and a stack of check-marked features. Featured tier flips to primary.
Standard plan tile with a uppercase name, big price, tagline, four feature bullets, and an outline CTA.