→ Alexander Hayes
→ Minimal Pricing Cards

Minimal Pricing Cards

This Example is contributed by Alexander Hayes, on 20-Mar-2025. It is responsive. similar terms for this example are Subscription Plan,Pricing Tier,Pricing Table,Pricing,Service rates,Subscription plans

Pricing Card Tier Selector

Author Alexander Hayes

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>1 User</li>
        <li>10 Projects</li>
        <li>5GB Storage</li>
        <li>Basic Support</li>
        <li><span class="not-included">API Access</span></li>
      </ul>
    </div>
    <div class="pricing-footer">
      <button class="btn">Get Started</button>
    </div>
  </div>

<div class="pricing-card featured">
    <div class="pricing-badge">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>5 Users</li>
        <li>50 Projects</li>
        <li>100GB Storage</li>
        <li>Priority Support</li>
        <li>API Access</li>
      </ul>
    </div>
    <div class="pricing-footer">
      <button class="btn">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>Unlimited Users</li>
        <li>Unlimited Projects</li>
        <li>1TB Storage</li>
        <li>24/7 Support</li>
        <li>API Access</li>
      </ul>
    </div>
    <div class="pricing-footer">
      <button class="btn">Get Started</button>
    </div>
  </div>
</div>

Related Examples