→ Anonymous
→ Subscription Pricing Card for SaaS Produ...

Subscription Pricing Card for SaaS Products

This Example is contributed by Anonymous, on 31-Mar-2025. It is responsive. similar terms for this example are Card Design,Cards,Subscription Plan,Pricing Tier,Pricing Table,Pricing,Service rates,Subscription plans

Card Subscription Pricing Card SaaS

Author Anonymous

Fork Fullscreen

<div class="pricing-container">
  <div class="pricing-card basic">
    <div class="badge">Basic</div>
    <div class="price">$9<span>/month</span></div>
    <div class="description">Perfect for individuals and small projects</div>
    <ul class="features">
      <li><i class="fas fa-check"></i> 5 Projects</li>
      <li><i class="fas fa-check"></i> 20GB Storage</li>
      <li><i class="fas fa-check"></i> Basic Support</li>
      <li class="disabled"><i class="fas fa-times"></i> Advanced Features</li>
      <li class="disabled"><i class="fas fa-times"></i> Custom Domain</li>
    </ul>
    <button class="btn">Choose Plan</button>
  </div>

<div class="pricing-card pro">
    <div class="badge popular">Pro</div>
    <div class="price">$29<span>/month</span></div>
    <div class="description">Designed for growing businesses</div>
    <ul class="features">
      <li><i class="fas fa-check"></i> 15 Projects</li>
      <li><i class="fas fa-check"></i> 50GB Storage</li>
      <li><i class="fas fa-check"></i> Priority Support</li>
      <li><i class="fas fa-check"></i> Advanced Features</li>
      <li class="disabled"><i class="fas fa-times"></i> Custom Domain</li>
    </ul>
    <button class="btn">Choose Plan</button>
  </div>

<div class="pricing-card premium">
    <div class="badge">Premium</div>
    <div class="price">$49<span>/month</span></div>
    <div class="description">Advanced features for enterprise teams</div>
    <ul class="features">
      <li><i class="fas fa-check"></i> Unlimited Projects</li>
      <li><i class="fas fa-check"></i> 150GB Storage</li>
      <li><i class="fas fa-check"></i> 24/7 Support</li>
      <li><i class="fas fa-check"></i> Advanced Features</li>
      <li><i class="fas fa-check"></i> Custom Domain</li>
    </ul>
    <button class="btn">Choose Plan</button>
  </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

Related Examples