v1.0.0

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-rounded-2xl vt-border vt-border-border-default vt-p-6">
  <h3 class="vt-text-sm vt-font-semibold">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-mains-quaternary">/month</span>
  </div>
  <ul class="vt-space-y-3 vt-mb-8">
    <li class="vt-flex vt-items-center vt-gap-2 vt-text-sm">5 projects</li>
  </ul>
  <button class="vt-btn vt-w-full">Get Started</button>
</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-flex vt-items-center vt-justify-center vt-gap-3 vt-mb-6">
  <span class="vt-text-sm vt-font-medium">Monthly</span>
  <div class="vt-w-11 vt-h-6 vt-rounded-full vt-bg-info-primary vt-relative vt-cursor-pointer">
    <div class="vt-absolute vt-right-0.5 vt-top-0.5 vt-w-5 vt-h-5 vt-rounded-full vt-bg-generic-white"></div>
  </div>
  <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-background vt-text-info-primary vt-text-xs">Save 20%</span>
</div>
<div class="vt-rounded-2xl vt-border vt-border-border-default 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">$15</span>
    <span class="vt-text-sm vt-text-mains-quaternary">/month</span>
  </div>
  <p class="vt-text-xs vt-text-mains-quaternary vt-mb-5">Billed annually ($180/year)</p>
  <ul class="vt-space-y-2 vt-mb-6">
    <li class="vt-flex vt-items-center vt-gap-2 vt-text-sm">...</li>
  </ul>
  <button class="vt-btn vt-w-full">Subscribe Now</button>
</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-2 vt-gap-4">
  <div class="vt-rounded-2xl vt-border vt-border-border-default 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-mains-quaternary">/mo</span>
    </div>
    <p class="vt-text-xs vt-text-mains-quaternary vt-mb-5">For individuals</p>
    <button class="vt-btn vt-btn-bordered vt-w-full">Choose Basic</button>
  </div>
  <div class="vt-rounded-2xl vt-border-2 vt-border-info-primary vt-p-5 vt-text-center">
    <h3 class="vt-text-sm vt-font-semibold vt-text-info-primary 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-mains-quaternary">/mo</span>
    </div>
    <p class="vt-text-xs vt-text-mains-quaternary vt-mb-5">For teams</p>
    <button class="vt-btn vt-w-full">Choose Premium</button>
  </div>
</div>

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-primary 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-mains-quaternary Typography Period label and description text
vt-text-sm vt-font-semibold Typography Plan name heading
vt-text-info-primary Modifier Highlighted plan name color
vt-space-y-3 Layout Feature list spacing
vt-bg-info-primary vt-text-generic-white Modifier Popular badge styling
vt-bg-info-background vt-text-info-primary 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