Pricing Comparison
Pricing
Pricing tier card with feature list, highlight state, optional badge, and CTA.
Pricing & Comparison
Conversion-focused components for pricing pages and competitive comparison sections.
Components
<XCardPricing />
A pricing tier card with a large price figure, feature checklist, optional badge, and a full-width CTA button. The highlighted prop inverts the card to a dark surface — intended for the recommended or most popular tier. Use inside XCardGrid with :columns="3" for a standard three-tier pricing layout.
<XCardGrid :columns="3" gap="md">
<XCardPricing
title="Membership"
description="Everything you need to understand your body."
price="$5.99"
period="/mo"
:features="[
'Sleep analysis',
'Activity tracking',
'Readiness score',
'Period prediction',
'Stress monitoring'
]"
:cta="{ label: 'Get started', to: '/membership' }"
/>
<XCardPricing
title="Membership+"
description="Advanced insights and priority support."
price="$9.99"
period="/mo"
badge="Most popular"
:highlighted="true"
:features="[
'Everything in Membership',
'Cardiovascular age',
'VO₂ max estimation',
'Personalized coaching',
'Priority support'
]"
:cta="{ label: 'Get Membership+', to: '/membership-plus' }"
/>
<XCardPricing
title="Family"
description="Share with up to 5 members."
price="$14.99"
period="/mo"
:features="[
'Everything in Membership+',
'Up to 5 accounts',
'Family dashboard',
'Shared goals'
]"
:cta="{ label: 'Get Family plan', to: '/family' }"
/>
</XCardGrid>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Tier name (required) |
description | string | — | Short tier description |
price | string | — | Price display string, e.g. "$9.99" (required) |
period | string | '/mo' | Billing period label appended after the price |
features | string[] | — | List of feature strings rendered as a checklist (required) |
cta | { label: string; to: string } | — | Full-width CTA button |
highlighted | boolean | false | Inverts card to dark surface with accent ring — use for the recommended tier |
badge | string | — | Small pill badge above the tier name (e.g. "Most popular") |
AI Context
category: PricingComparison
package: "@xenterprises/nuxt-x-cards"
components:
- XCardPricing
use-when: >
Use XCardPricing in 2- or 3-column XCardGrid layouts on pricing pages.
Set highlighted: true on the recommended tier.
notes:
- XCardPricing highlighted tier uses dark surface with accent-gold check icons
- Does not depend on useXCards() global defaults