Standard plan tile with a uppercase name, big price, tagline, four feature bullets, and an outline CTA.
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Card11 } from "@/components/beste/component/card11";
<Card11
surface="card"
bordered
name="Starter"
price="$12"
period="/ mo"
tagline="Everything a small team needs to ship."
features={["Up to 5 editors","25 GB asset storage","Weekly analytics email","Community support"]}
action="Choose Starter"
/>The import and the props worth knowing about, in one place.
import { Card11 } from "@/components/beste/piece/card11";
<Card11
surface="card"
bordered={true}
inverted={false}
name="Starter"
price="$12"
period="/ mo"
tagline="Everything a small team needs to ship."
features={[
"Up to 5 editors",
"25 GB asset storage",
"Weekly analytics email",
"Community support"
]}
action="Choose Starter"
/>Pricing tier with a headline amount, period, and a stack of check-marked features. Featured tier flips to primary.
Inverted plan card in foreground paint, showing enterprise callouts and a contact-sales CTA.
Highlighted plan with a gradient border, Most popular badge on top, and a filled gradient CTA button.
Compact commerce tile with a warm gradient thumbnail, overlay tag, save heart, and a strikethrough original price.