→ Jordan McKenzie
→ Three-Tier Pricing Cards

Three-Tier Pricing Cards

Clear and attractive pricing cards that showcase your product tiers with a modern design, perfect for SaaS and subscription-based businesses.

This Example is contributed by Jordan McKenzie, on 27-Feb-2025. It is responsive. similar terms for this example are Subscription Plan,Pricing Tier,Pricing Table,Pricing,Service rates,Subscription plans

E-commerce Pricing Card

Author Jordan McKenzie

Fork Fullscreen

<div class="pricing-container">
  <div class="pricing-card basic">
    <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><i class="fa fa-check"></i> 5 Projects</li>
        <li><i class="fa fa-check"></i> 20GB Storage</li>
        <li><i class="fa fa-check"></i> Basic Support</li>
        <li><i class="fa fa-times"></i> Advanced Features</li>
        <li><i class="fa fa-times"></i> Priority Support</li>
      </ul>
    </div>
    <div class="pricing-footer">
      <button class="btn-select">Select Plan</button>
    </div>
  </div>

<div class="pricing-card pro">
    <div class="ribbon">Popular</div>
    <div class="pricing-header">
      <h3>Professional</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><i class="fa fa-check"></i> 15 Projects</li>
        <li><i class="fa fa-check"></i> 50GB Storage</li>
        <li><i class="fa fa-check"></i> Priority Support</li>
        <li><i class="fa fa-check"></i> Advanced Features</li>
        <li><i class="fa fa-times"></i> Custom Branding</li>
      </ul>
    </div>
    <div class="pricing-footer">
      <button class="btn-select">Select Plan</button>
    </div>
  </div>

<div class="pricing-card premium">
    <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><i class="fa fa-check"></i> Unlimited Projects</li>
        <li><i class="fa fa-check"></i> 150GB Storage</li>
        <li><i class="fa fa-check"></i> 24/7 Support</li>
        <li><i class="fa fa-check"></i> Advanced Features</li>
        <li><i class="fa fa-check"></i> Custom Branding</li>
      </ul>
    </div>
    <div class="pricing-footer">
      <button class="btn-select">Select Plan</button>
    </div>
  </div>
</div>

Related Examples