→ Alexandra Sinclair
→ Elegant Pricing Cards for Premium Servic...

Elegant Pricing Cards for Premium Service Plans

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

Pricing Card

Author Alexandra Sinclair

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> 10GB Storage</li>
        <li><span class="check">✓</span> 1 User</li>
        <li><span class="check">✓</span> Email Support</li>
        <li><span class="cross">✗</span> Custom Domain</li>
        <li><span class="cross">✗</span> Premium Support</li>
      </ul>
    </div>
    <div class="pricing-footer">
      <button class="btn">Get Started</button>
    </div>
  </div>

<div class="pricing-card popular">
    <div class="popular-tag">Most 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><span class="check">✓</span> 50GB Storage</li>
        <li><span class="check">✓</span> 5 Users</li>
        <li><span class="check">✓</span> Priority Email Support</li>
        <li><span class="check">✓</span> Custom Domain</li>
        <li><span class="cross">✗</span> Premium Support</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><span class="check">✓</span> 200GB Storage</li>
        <li><span class="check">✓</span> Unlimited Users</li>
        <li><span class="check">✓</span> Priority Email Support</li>
        <li><span class="check">✓</span> Custom Domain</li>
        <li><span class="check">✓</span> Premium Support</li>
      </ul>
    </div>
    <div class="pricing-footer">
      <button class="btn">Get Started</button>
    </div>
  </div>
</div>

Related Examples