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="uc-rounded-2xl uc-border uc-border-border-default uc-p-6">
  <h3 class="uc-text-sm uc-font-semibold">Free</h3>
  <div class="uc-mt-3 uc-mb-4">
    <span class="uc-text-3xl uc-font-bold">$0</span>
    <span class="uc-text-sm uc-text-fg-disabled">/month</span>
  </div>
  <ul class="uc-space-y-3 uc-mb-8">
    <li class="uc-flex uc-items-center uc-gap-2 uc-text-sm">5 projects</li>
  </ul>
  <button class="uc-btn uc-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="uc-flex uc-items-center uc-justify-center uc-gap-3 uc-mb-6">
  <span class="uc-text-sm uc-font-medium">Monthly</span>
  <div class="uc-w-11 uc-h-6 uc-rounded-full uc-bg-accents-blue uc-relative uc-cursor-pointer">
    <div class="uc-absolute uc-right-0.5 uc-top-0.5 uc-w-5 uc-h-5 uc-rounded-full uc-bg-constant-white"></div>
  </div>
  <span class="uc-text-sm uc-font-medium">Yearly</span>
  <span class="uc-px-2 uc-py-0.5 uc-rounded-full uc-bg-tint-blue uc-text-accents-blue uc-text-xs">Save 20%</span>
</div>
<div class="uc-rounded-2xl uc-border uc-border-border-default uc-p-6">
  <h3 class="uc-text-sm uc-font-semibold">Pro Plan</h3>
  <div class="uc-mt-3 uc-mb-1">
    <span class="uc-text-3xl uc-font-bold">$15</span>
    <span class="uc-text-sm uc-text-fg-disabled">/month</span>
  </div>
  <p class="uc-text-xs uc-text-fg-disabled uc-mb-5">Billed annually ($180/year)</p>
  <ul class="uc-space-y-2 uc-mb-6">
    <li class="uc-flex uc-items-center uc-gap-2 uc-text-sm">...</li>
  </ul>
  <button class="uc-btn uc-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="uc-grid uc-grid-cols-2 uc-gap-4">
  <div class="uc-rounded-2xl uc-border uc-border-border-default uc-p-5 uc-text-center">
    <h3 class="uc-text-sm uc-font-semibold uc-mb-3">Basic</h3>
    <div class="uc-mb-4">
      <span class="uc-text-4xl uc-font-bold">$9</span>
      <span class="uc-text-sm uc-text-fg-disabled">/mo</span>
    </div>
    <p class="uc-text-xs uc-text-fg-disabled uc-mb-5">For individuals</p>
    <button class="uc-btn uc-btn-bordered uc-w-full">Choose Basic</button>
  </div>
  <div class="uc-rounded-2xl uc-border-2 uc-border-accents-blue uc-p-5 uc-text-center">
    <h3 class="uc-text-sm uc-font-semibold uc-text-accents-blue uc-mb-3">Premium</h3>
    <div class="uc-mb-4">
      <span class="uc-text-4xl uc-font-bold">$29</span>
      <span class="uc-text-sm uc-text-fg-disabled">/mo</span>
    </div>
    <p class="uc-text-xs uc-text-fg-disabled uc-mb-5">For teams</p>
    <button class="uc-btn uc-w-full">Choose Premium</button>
  </div>
</div>

API Reference

All CSS classes available for the Pricing Card component.

Class Type Description
uc-rounded-2xl Layout Card border radius
uc-border uc-border-border-default Layout Default card border
uc-border-2 uc-border-accents-blue Modifier Highlighted/recommended card border
uc-p-6 Layout Card padding (default)
uc-p-5 Layout Card padding (compact)
uc-text-3xl uc-font-bold Typography Price display text
uc-text-4xl uc-font-bold Typography Large price display text (compact variant)
uc-text-sm uc-text-fg-disabled Typography Period label and description text
uc-text-sm uc-font-semibold Typography Plan name heading
uc-text-accents-blue Modifier Highlighted plan name color
uc-space-y-3 Layout Feature list spacing
uc-bg-accents-blue uc-text-constant-white Modifier Popular badge styling
uc-bg-tint-blue uc-text-accents-blue Modifier Discount badge styling
uc-btn uc-w-full Action Full-width CTA button
uc-grid uc-grid-cols-1 uc-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