→ Morgan Reynolds
→ Minimal Pricing Cards for SaaS Products

Minimal Pricing Cards for SaaS Products

Showcase your product pricing with these clean, minimalist pricing cards designed for clarity and conversion optimization.

This Example is contributed by Morgan Reynolds, on 25-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 Morgan Reynolds

Fork Fullscreen

<div class="pricing-container">
  <div class="pricing-card">
    <div class="pricing-header">
      <h3>Basic</h3>
      <div class="price">
        <span class="currency">$</span>
        <span class="amount">19</span>
        <span class="period">/month</span>
      </div>
    </div>
    <div class="pricing-features">
      <ul>
        <li><span class="check">✓</span> 5 Projects</li>
        <li><span class="check">✓</span> 20GB Storage</li>
        <li><span class="check">✓</span> Basic Support</li>
        <li class="unavailable"><span class="cross">×</span> Advanced Analytics</li>
        <li class="unavailable"><span class="cross">×</span> Custom Domain</li>
      </ul>
    </div>
    <div class="pricing-footer">
      <button class="btn">Get Started</button>
    </div>
  </div>

<div class="pricing-card popular">
    <div class="popular-badge">Most Popular</div>
    <div class="pricing-header">
      <h3>Pro</h3>
      <div class="price">
        <span class="currency">$</span>
        <span class="amount">49</span>
        <span class="period">/month</span>
      </div>
    </div>
    <div class="pricing-features">
      <ul>
        <li><span class="check">✓</span> 15 Projects</li>
        <li><span class="check">✓</span> 50GB Storage</li>
        <li><span class="check">✓</span> Priority Support</li>
        <li><span class="check">✓</span> Advanced Analytics</li>
        <li class="unavailable"><span class="cross">×</span> Custom Domain</li>
      </ul>
    </div>
    <div class="pricing-footer">
      <button class="btn primary">Get Started</button>
    </div>
  </div>

<div class="pricing-card">
    <div class="pricing-header">
      <h3>Enterprise</h3>
      <div class="price">
        <span class="currency">$</span>
        <span class="amount">99</span>
        <span class="period">/month</span>
      </div>
    </div>
    <div class="pricing-features">
      <ul>
        <li><span class="check">✓</span> Unlimited Projects</li>
        <li><span class="check">✓</span> 100GB Storage</li>
        <li><span class="check">✓</span> 24/7 Support</li>
        <li><span class="check">✓</span> Advanced Analytics</li>
        <li><span class="check">✓</span> Custom Domain</li>
      </ul>
    </div>
    <div class="pricing-footer">
      <button class="btn">Get Started</button>
    </div>
  </div>
</div>

Related Examples