Pricing Card

Pricing plan cards for subscription and billing pages.

Three Tier

Classic three-column pricing layout with highlighted plan.

html

Free

$0 /month

Perfect for getting started.

5 projects
1 GB storage
Community support

Popular

Pro

$19 /month

Best for professionals.

Unlimited projects
50 GB storage
Priority support
Advanced analytics

Enterprise

$49 /month

For teams and organizations.

Everything in Pro
Unlimited storage
SSO & SAML
Dedicated account manager

<div class="vt-grid vt-grid-cols-1 vt-sm:grid-cols-3 vt-gap-4 vt-max-w-3xl vt-mx-auto">
  <!-- Free -->
  <div class="vt-card vt-p-6 vt-flex vt-flex-col">
    <h3 class="vt-text-sm vt-font-semibold vt-text-foreground-muted">Free</h3>
    <div class="vt-mt-3 vt-mb-4">
      <span class="vt-text-3xl vt-font-bold">$0</span>
      <span class="vt-text-sm vt-text-foreground-muted">/month</span>
    </div>
    <p class="vt-text-sm vt-text-foreground-muted vt-mb-6">Perfect for getting started.</p>
    <ul class="vt-space-y-3 vt-mb-8 vt-flex-1">
      <li class="vt-feature-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        5 projects
      </li>
      <li class="vt-feature-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        1 GB storage
      </li>
      <li class="vt-feature-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Community support
      </li>
    </ul>
    <button class="vt-btn vt-btn-bordered vt-w-full">
      Get Started
    </button>
  </div>
  <!-- Pro (highlighted) -->
  <div class="vt-card vt-border-2 vt-border-info-fill vt-p-6 vt-flex vt-flex-col vt-relative">
    <span class="vt-badge vt-badge-primary vt-absolute vt--top-3 vt-left-1/2 vt--translate-x-1/2">Popular</span>
    <h3 class="vt-text-sm vt-font-semibold vt-text-info-fill">Pro</h3>
    <div class="vt-mt-3 vt-mb-4">
      <span class="vt-text-3xl vt-font-bold">$19</span>
      <span class="vt-text-sm vt-text-foreground-muted">/month</span>
    </div>
    <p class="vt-text-sm vt-text-foreground-muted vt-mb-6">Best for professionals.</p>
    <ul class="vt-space-y-3 vt-mb-8 vt-flex-1">
      <li class="vt-feature-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Unlimited projects
      </li>
      <li class="vt-feature-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        50 GB storage
      </li>
      <li class="vt-feature-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Priority support
      </li>
      <li class="vt-feature-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Advanced analytics
      </li>
    </ul>
    <button class="vt-btn vt-btn-primary vt-w-full">
      Get Started
    </button>
  </div>
  <!-- Enterprise -->
  <div class="vt-card vt-p-6 vt-flex vt-flex-col">
    <h3 class="vt-text-sm vt-font-semibold vt-text-foreground-muted">Enterprise</h3>
    <div class="vt-mt-3 vt-mb-4">
      <span class="vt-text-3xl vt-font-bold">$49</span>
      <span class="vt-text-sm vt-text-foreground-muted">/month</span>
    </div>
    <p class="vt-text-sm vt-text-foreground-muted vt-mb-6">For teams and organizations.</p>
    <ul class="vt-space-y-3 vt-mb-8 vt-flex-1">
      <li class="vt-feature-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Everything in Pro
      </li>
      <li class="vt-feature-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Unlimited storage
      </li>
      <li class="vt-feature-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        SSO &amp; SAML
      </li>
      <li class="vt-feature-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Dedicated account manager
      </li>
    </ul>
    <button class="vt-btn vt-btn-bordered vt-w-full">
      Contact Sales
    </button>
  </div>
</div>

With Period Toggle

Monthly/yearly toggle with discount badge.

html

Monthly Yearly Save 20%

Pro Plan

$15 /month

Billed annually ($180/year)

Unlimited projects
50 GB storage
Priority support

<div class="vt-max-w-sm vt-mx-auto" data-pricing="">
  <div class="vt-flex vt-items-center vt-justify-center vt-gap-3 vt-mb-6">
    <span class="vt-text-sm vt-font-medium">Monthly</span>
    <button type="button" role="switch" aria-label="Yearly billing" aria-checked="true" class="vt-switch vt-active vt-bg-brand-fill" data-pricing-toggle=""><span class="vt-switch-thumb"></span></button>
    <span class="vt-text-sm vt-font-medium">Yearly</span>
    <span class="vt-px-2 vt-py-0.5 vt-rounded-full vt-bg-info-surface vt-text-info-fill vt-text-xs vt-font-semibold">Save 20%</span>
  </div>
  <div class="vt-card vt-p-6">
    <h3 class="vt-text-sm vt-font-semibold">Pro Plan</h3>
    <div class="vt-mt-3 vt-mb-1">
      <span class="vt-text-3xl vt-font-bold" data-pricing-price="" data-monthly="$19" data-yearly="$15">$15</span>
      <span class="vt-text-sm vt-text-foreground-muted">/month</span>
    </div>
    <p aria-live="polite" data-pricing-description="" data-monthly="Billed monthly ($19/month)" data-yearly="Billed annually ($180/year)" class="vt-text-xs vt-text-foreground-muted vt-mb-5">Billed annually ($180/year)</p>
    <ul class="vt-space-y-2 vt-mb-6">
      <li class="vt-feature-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Unlimited projects
      </li>
      <li class="vt-feature-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        50 GB storage
      </li>
      <li class="vt-feature-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Priority support
      </li>
    </ul>
    <button class="vt-btn vt-btn-primary vt-w-full">
      Subscribe Now
    </button>
  </div>
</div>

Compact

Minimal pricing card for simple comparisons.

html

Basic

$9 /mo

For individuals

Premium

$29 /mo

For teams

<div class="vt-grid vt-grid-cols-1 vt-sm:grid-cols-2 vt-gap-4 vt-max-w-lg vt-mx-auto">
  <div class="vt-card vt-p-5 vt-text-center">
    <h3 class="vt-text-sm vt-font-semibold vt-mb-3">Basic</h3>
    <div class="vt-mb-4">
      <span class="vt-text-4xl vt-font-bold">$9</span>
      <span class="vt-text-sm vt-text-foreground-muted">/mo</span>
    </div>
    <p class="vt-text-xs vt-text-foreground-muted vt-mb-5">For individuals</p>
    <button class="vt-btn vt-btn-bordered vt-btn-sm vt-w-full">
      Choose Basic
    </button>
  </div>
  <div class="vt-card vt-border-2 vt-border-info-fill vt-p-5 vt-text-center">
    <h3 class="vt-text-sm vt-font-semibold vt-text-info-fill vt-mb-3">Premium</h3>
    <div class="vt-mb-4">
      <span class="vt-text-4xl vt-font-bold">$29</span>
      <span class="vt-text-sm vt-text-foreground-muted">/mo</span>
    </div>
    <p class="vt-text-xs vt-text-foreground-muted vt-mb-5">For teams</p>
    <button class="vt-btn vt-btn-primary vt-btn-sm vt-w-full">
      Choose Premium
    </button>
  </div>
</div>

Guidelines

Present subscription tiers side by side and highlight a single recommended plan.

Basic

$9 /mo

Premium

$29 /mo

Highlight one recommended plan so the choice is clear.

Basic

$9 /mo

Premium

$29 /mo

Don't

Don't highlight every plan — nothing stands out.

API Reference

All CSS classes available for the Pricing Card component.

Class	Type	Description
`vt-rounded-2xl`	Layout	Card border radius
`vt-border vt-border-border-default`	Layout	Default card border
`vt-border-2 vt-border-info-fill`	Modifier	Highlighted/recommended card border
`vt-p-6`	Layout	Card padding (default)
`vt-p-5`	Layout	Card padding (compact)
`vt-text-3xl vt-font-bold`	Typography	Price display text
`vt-text-4xl vt-font-bold`	Typography	Large price display text (compact variant)
`vt-text-sm vt-text-foreground-muted`	Typography	Period label and description text
`vt-text-sm vt-font-semibold`	Typography	Plan name heading
`vt-text-info-fill`	Modifier	Highlighted plan name color
`vt-space-y-3`	Layout	Feature list spacing
`vt-bg-info-fill vt-text-generic-white`	Modifier	Popular badge styling
`vt-bg-info-surface vt-text-info-fill`	Modifier	Discount badge styling
`vt-btn vt-w-full`	Action	Full-width CTA button
`vt-grid vt-grid-cols-1 vt-sm:grid-cols-3`	Layout	Three-column pricing grid

Accessibility

Keyboard and screen reader support.

Feature	Details
Semantics	Use article for each pricing card, heading for plan name
Comparison	Use a comparison table with proper th/td for feature comparison
CTA	Action buttons should clearly state the plan, e.g. "Choose Pro plan"
Highlighted	Recommended plan visual highlight should also be conveyed via text