→ Melissa Chen
→ Responsive Pricing Section with Monthly/...

Responsive Pricing Section with Monthly/Yearly Toggle

A responsive pricing section with three plans displayed as cards, featuring a monthly/yearly toggle switch and highlighting the recommended option.

This Example is contributed by Melissa Chen, on 11-May-2025. It is responsive. similar terms for this example are Theme Toggle,Toggle,Toggle Button,Subscription Plan,Pricing Tier,Pricing Table,Pricing,Service rates,Subscription plans

Toggle switch Subscription Pricing Card Card Layout

Author Melissa Chen

Fork Fullscreen

<div class="pricing-container">
  <div class="pricing-header">
    <h2>Choose Your Plan</h2>
    <p>Select the perfect plan for your needs</p>
    <div class="pricing-toggle">
      <span>Monthly</span>
      <label class="toggle">
        <input type="checkbox" id="billing-toggle">
        <span class="slider"></span>
      </label>
      <span>Yearly <span class="savings-badge">Save 20%</span></span>
    </div>
  </div>
  
  <div class="pricing-cards">
    <div class="pricing-card">
      <div class="card-header">
        <h3>Free</h3>
        <div class="price">
          <span class="amount monthly">$0</span>
          <span class="amount yearly">$0</span>
          <span class="period">/month</span>
        </div>
        <p>Perfect for individuals just getting started</p>
      </div>
      <div class="card-body">
        <ul class="features">
          <li><span class="checkmark">✓</span> Single user</li>
          <li><span class="checkmark">✓</span> 5 projects</li>
          <li><span class="checkmark">✓</span> 2GB storage</li>
          <li><span class="checkmark">✓</span> Basic support</li>
          <li class="disabled"><span class="checkmark">✓</span> Advanced features</li>
          <li class="disabled"><span class="checkmark">✓</span> Priority support</li>
        </ul>
      </div>
      <div class="card-footer">
        <button class="btn-secondary">Get Started</button>
      </div>
    </div>
    
    <div class="pricing-card recommended">
      <div class="recommendation-badge">Recommended</div>
      <div class="card-header">
        <h3>Pro</h3>
        <div class="price">
          <span class="amount monthly">$29</span>
          <span class="amount yearly">$278</span>
          <span class="period">/month</span>
        </div>
        <p>Great for professionals and small teams</p>
      </div>
      <div class="card-body">
        <ul class="features">
          <li><span class="checkmark">✓</span> Up to 5 users</li>
          <li><span class="checkmark">✓</span> 20 projects</li>
          <li><span class="checkmark">✓</span> 20GB storage</li>
          <li><span class="checkmark">✓</span> Priority support</li>
          <li><span class="checkmark">✓</span> Advanced features</li>
          <li class="disabled"><span class="checkmark">✓</span> Custom integrations</li>
        </ul>
      </div>
      <div class="card-footer">
        <button class="btn-primary">Get Started</button>
      </div>
    </div>
    
    <div class="pricing-card">
      <div class="card-header">
        <h3>Expert</h3>
        <div class="price">
          <span class="amount monthly">$99</span>
          <span class="amount yearly">$948</span>
          <span class="period">/month</span>
        </div>
        <p>For large teams with advanced needs</p>
      </div>
      <div class="card-body">
        <ul class="features">
          <li><span class="checkmark">✓</span> Unlimited users</li>
          <li><span class="checkmark">✓</span> Unlimited projects</li>
          <li><span class="checkmark">✓</span> 100GB storage</li>
          <li><span class="checkmark">✓</span> 24/7 dedicated support</li>
          <li><span class="checkmark">✓</span> Advanced features</li>
          <li><span class="checkmark">✓</span> Custom integrations</li>
        </ul>
      </div>
      <div class="card-footer">
        <button class="btn-secondary">Get Started</button>
      </div>
    </div>
  </div>
  
  <div class="compare-plans">
    <button class="btn-text">Compare all plan features</button>
  </div>
</div>

Related Examples