Foundation Pricing Tables
Pricing tables are common components used to display product or service pricing plans. This chapter will introduce how to create beautiful pricing tables with Foundation.
Basic Pricing Table
Use the card component to create basic pricing tables:
html
<div class="card text-center">
<div class="card-divider">
<h4>Basic</h4>
</div>
<div class="card-section">
<h3>$29<small>/mo</small></h3>
<ul class="no-bullet">
<li>5GB Storage</li>
<li>100 Users</li>
<li>Email Support</li>
<li>Basic Features</li>
</ul>
<a class="button hollow" href="#">Select Plan</a>
</div>
</div>Three-Column Pricing Table
Create a common three-column comparison pricing table:
html
<div class="grid-x grid-margin-x small-up-1 medium-up-3">
<!-- Basic Plan -->
<div class="cell">
<div class="card text-center">
<div class="card-divider">
<h4>Basic</h4>
</div>
<div class="card-section">
<h2 class="pricing">$29<small>/mo</small></h2>
<ul class="no-bullet">
<li>5GB Storage</li>
<li>100 Users</li>
<li>Email Support</li>
<li>-</li>
<li>-</li>
</ul>
<a class="button hollow expanded" href="#">Select</a>
</div>
</div>
</div>
<!-- Pro Plan - Recommended -->
<div class="cell">
<div class="card text-center" style="border: 2px solid #1779ba;">
<div class="card-divider" style="background: #1779ba; color: white;">
<h4>Pro <span class="label">Recommended</span></h4>
</div>
<div class="card-section">
<h2 class="pricing">$99<small>/mo</small></h2>
<ul class="no-bullet">
<li>50GB Storage</li>
<li>1000 Users</li>
<li>Phone Support</li>
<li>API Access</li>
<li>-</li>
</ul>
<a class="button expanded" href="#">Select</a>
</div>
</div>
</div>
<!-- Enterprise Plan -->
<div class="cell">
<div class="card text-center">
<div class="card-divider">
<h4>Enterprise</h4>
</div>
<div class="card-section">
<h2 class="pricing">$299<small>/mo</small></h2>
<ul class="no-bullet">
<li>Unlimited Storage</li>
<li>Unlimited Users</li>
<li>Dedicated Support</li>
<li>API Access</li>
<li>Custom Features</li>
</ul>
<a class="button hollow expanded" href="#">Contact Us</a>
</div>
</div>
</div>
</div>Highlighting Recommended Plan
html
<style>
.pricing-card.featured {
transform: scale(1.05);
z-index: 1;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}
.pricing-card.featured .card-divider {
background: #1779ba;
color: white;
}
</style>
<div class="card pricing-card featured text-center">
<div class="card-divider">
<h4>Most Popular</h4>
</div>
<div class="card-section">
<!-- Content -->
</div>
</div>Monthly/Yearly Toggle
html
<div class="text-center" style="margin-bottom: 30px;">
<div class="button-group">
<button class="button" id="monthly-btn">Monthly</button>
<button class="button hollow" id="yearly-btn">Yearly <small>Save 20%</small></button>
</div>
</div>
<div class="grid-x grid-margin-x small-up-1 medium-up-3" id="pricing-cards">
<div class="cell">
<div class="card text-center">
<div class="card-divider">
<h4>Basic</h4>
</div>
<div class="card-section">
<h2 class="pricing">
<span class="monthly">$29</span>
<span class="yearly" style="display: none;">$279</span>
<small>/mo</small>
</h2>
<p class="yearly-note" style="display: none; color: #3adb76;">
That's $23.25/mo, save $69
</p>
<!-- Other content -->
</div>
</div>
</div>
</div>
<script>
$('#monthly-btn').on('click', function() {
$(this).removeClass('hollow');
$('#yearly-btn').addClass('hollow');
$('.monthly').show();
$('.yearly, .yearly-note').hide();
});
$('#yearly-btn').on('click', function() {
$(this).removeClass('hollow');
$('#monthly-btn').addClass('hollow');
$('.yearly, .yearly-note').show();
$('.monthly').hide();
});
</script>Feature Comparison Table
html
<table class="hover">
<thead>
<tr>
<th>Feature</th>
<th class="text-center">Basic</th>
<th class="text-center" style="background: #e8f4fc;">Pro</th>
<th class="text-center">Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td>Storage</td>
<td class="text-center">5GB</td>
<td class="text-center" style="background: #e8f4fc;">50GB</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<td>Users</td>
<td class="text-center">100</td>
<td class="text-center" style="background: #e8f4fc;">1000</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<td>API Access</td>
<td class="text-center"><i class="fi-x" style="color: #cc4b37;"></i></td>
<td class="text-center" style="background: #e8f4fc;"><i class="fi-check" style="color: #3adb76;"></i></td>
<td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
</tr>
<tr>
<td>Priority Support</td>
<td class="text-center"><i class="fi-x" style="color: #cc4b37;"></i></td>
<td class="text-center" style="background: #e8f4fc;"><i class="fi-check" style="color: #3adb76;"></i></td>
<td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
</tr>
<tr>
<td>Custom Domain</td>
<td class="text-center"><i class="fi-x" style="color: #cc4b37;"></i></td>
<td class="text-center" style="background: #e8f4fc;"><i class="fi-x" style="color: #cc4b37;"></i></td>
<td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td class="text-center">
<a class="button hollow small" href="#">Select</a>
</td>
<td class="text-center" style="background: #e8f4fc;">
<a class="button small" href="#">Select</a>
</td>
<td class="text-center">
<a class="button hollow small" href="#">Contact Us</a>
</td>
</tr>
</tfoot>
</table>Pricing Table with Icons
html
<div class="card text-center">
<div class="card-section" style="padding-top: 30px;">
<i class="fi-star" style="font-size: 48px; color: #1779ba;"></i>
<h4 style="margin-top: 15px;">Pro</h4>
<h2>$99<small>/mo</small></h2>
</div>
<div class="card-section">
<ul class="no-bullet">
<li><i class="fi-check" style="color: #3adb76;"></i> 50GB Storage</li>
<li><i class="fi-check" style="color: #3adb76;"></i> 1000 Users</li>
<li><i class="fi-check" style="color: #3adb76;"></i> Phone Support</li>
<li><i class="fi-check" style="color: #3adb76;"></i> API Access</li>
</ul>
<a class="button expanded" href="#">Subscribe Now</a>
</div>
</div>Complete Example
html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation Pricing Tables Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
<style>
.demo-section {
margin-bottom: 60px;
}
.demo-section h2 {
text-align: center;
margin-bottom: 30px;
}
.pricing-card {
transition: transform 0.3s, box-shadow 0.3s;
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.pricing-card.featured {
border: 2px solid #1779ba;
transform: scale(1.02);
}
.pricing-card.featured .card-divider {
background: #1779ba;
color: white;
}
.pricing-card .price {
font-size: 3rem;
font-weight: bold;
color: #1779ba;
}
.pricing-card .price small {
font-size: 1rem;
color: #666;
}
.pricing-card ul {
margin: 20px 0;
}
.pricing-card ul li {
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.pricing-card ul li:last-child {
border-bottom: none;
}
.pricing-card .feature-icon {
margin-right: 8px;
}
.billing-toggle {
margin-bottom: 40px;
}
</style>
</head>
<body>
<div class="grid-container">
<h1 class="text-center" style="margin: 40px 0;">Choose the Right Plan for You</h1>
<!-- Billing Cycle Toggle -->
<div class="billing-toggle text-center">
<div class="button-group">
<button class="button" id="monthly-btn">Monthly</button>
<button class="button hollow" id="yearly-btn">Yearly <span class="label success">Save 20%</span></button>
</div>
</div>
<!-- Pricing Cards -->
<div class="demo-section">
<div class="grid-x grid-margin-x small-up-1 medium-up-3">
<!-- Basic Plan -->
<div class="cell">
<div class="card pricing-card text-center">
<div class="card-divider">
<h4>Basic</h4>
</div>
<div class="card-section">
<div class="price">
<span class="monthly">$29</span>
<span class="yearly" style="display: none;">$279</span>
<small>/mo</small>
</div>
<p class="yearly-note text-muted" style="display: none;">
Only $23.25/mo
</p>
<ul class="no-bullet">
<li><i class="fi-check feature-icon" style="color: #3adb76;"></i>5GB Storage</li>
<li><i class="fi-check feature-icon" style="color: #3adb76;"></i>100 Users</li>
<li><i class="fi-check feature-icon" style="color: #3adb76;"></i>Email Support</li>
<li><i class="fi-x feature-icon" style="color: #ccc;"></i>API Access</li>
<li><i class="fi-x feature-icon" style="color: #ccc;"></i>Priority Support</li>
</ul>
<a class="button hollow expanded" href="#">Select Basic</a>
</div>
</div>
</div>
<!-- Pro Plan - Recommended -->
<div class="cell">
<div class="card pricing-card featured text-center">
<div class="card-divider">
<h4>Pro <span class="label">Most Popular</span></h4>
</div>
<div class="card-section">
<div class="price">
<span class="monthly">$99</span>
<span class="yearly" style="display: none;">$949</span>
<small>/mo</small>
</div>
<p class="yearly-note text-muted" style="display: none;">
Only $79.08/mo
</p>
<ul class="no-bullet">
<li><i class="fi-check feature-icon" style="color: #3adb76;"></i>50GB Storage</li>
<li><i class="fi-check feature-icon" style="color: #3adb76;"></i>1000 Users</li>
<li><i class="fi-check feature-icon" style="color: #3adb76;"></i>Phone Support</li>
<li><i class="fi-check feature-icon" style="color: #3adb76;"></i>API Access</li>
<li><i class="fi-x feature-icon" style="color: #ccc;"></i>Dedicated Support</li>
</ul>
<a class="button expanded" href="#">Select Pro</a>
</div>
</div>
</div>
<!-- Enterprise Plan -->
<div class="cell">
<div class="card pricing-card text-center">
<div class="card-divider">
<h4>Enterprise</h4>
</div>
<div class="card-section">
<div class="price">
<span class="monthly">$299</span>
<span class="yearly" style="display: none;">$2869</span>
<small>/mo</small>
</div>
<p class="yearly-note text-muted" style="display: none;">
Only $239.08/mo
</p>
<ul class="no-bullet">
<li><i class="fi-check feature-icon" style="color: #3adb76;"></i>Unlimited Storage</li>
<li><i class="fi-check feature-icon" style="color: #3adb76;"></i>Unlimited Users</li>
<li><i class="fi-check feature-icon" style="color: #3adb76;"></i>24/7 Support</li>
<li><i class="fi-check feature-icon" style="color: #3adb76;"></i>API Access</li>
<li><i class="fi-check feature-icon" style="color: #3adb76;"></i>Dedicated Support</li>
</ul>
<a class="button hollow expanded" href="#">Contact Sales</a>
</div>
</div>
</div>
</div>
</div>
<!-- Feature Comparison Table -->
<div class="demo-section">
<h2>Feature Comparison</h2>
<table class="hover">
<thead>
<tr>
<th>Feature</th>
<th class="text-center">Basic</th>
<th class="text-center" style="background: #e8f4fc;">Pro</th>
<th class="text-center">Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Storage</strong></td>
<td class="text-center">5GB</td>
<td class="text-center" style="background: #e8f4fc;">50GB</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<td><strong>Users</strong></td>
<td class="text-center">100</td>
<td class="text-center" style="background: #e8f4fc;">1000</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<td><strong>API Requests/mo</strong></td>
<td class="text-center">1,000</td>
<td class="text-center" style="background: #e8f4fc;">100,000</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<td><strong>SSL Certificate</strong></td>
<td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
<td class="text-center" style="background: #e8f4fc;"><i class="fi-check" style="color: #3adb76;"></i></td>
<td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
</tr>
<tr>
<td><strong>Custom Domain</strong></td>
<td class="text-center"><i class="fi-x" style="color: #cc4b37;"></i></td>
<td class="text-center" style="background: #e8f4fc;"><i class="fi-check" style="color: #3adb76;"></i></td>
<td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
</tr>
<tr>
<td><strong>Advanced Analytics</strong></td>
<td class="text-center"><i class="fi-x" style="color: #cc4b37;"></i></td>
<td class="text-center" style="background: #e8f4fc;"><i class="fi-check" style="color: #3adb76;"></i></td>
<td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
</tr>
<tr>
<td><strong>Priority Support</strong></td>
<td class="text-center"><i class="fi-x" style="color: #cc4b37;"></i></td>
<td class="text-center" style="background: #e8f4fc;"><i class="fi-x" style="color: #cc4b37;"></i></td>
<td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
</tr>
<tr>
<td><strong>SLA Guarantee</strong></td>
<td class="text-center">99%</td>
<td class="text-center" style="background: #e8f4fc;">99.9%</td>
<td class="text-center">99.99%</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>Price</strong></td>
<td class="text-center"><strong>$29/mo</strong></td>
<td class="text-center" style="background: #e8f4fc;"><strong>$99/mo</strong></td>
<td class="text-center"><strong>$299/mo</strong></td>
</tr>
<tr>
<td></td>
<td class="text-center">
<a class="button hollow small" href="#">Select</a>
</td>
<td class="text-center" style="background: #e8f4fc;">
<a class="button small" href="#">Select</a>
</td>
<td class="text-center">
<a class="button hollow small" href="#">Contact Us</a>
</td>
</tr>
</tfoot>
</table>
</div>
<!-- FAQ -->
<div class="demo-section">
<h2>Frequently Asked Questions</h2>
<ul class="accordion" data-accordion data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Can I switch plans anytime?</a>
<div class="accordion-content" data-tab-content>
<p>Yes, you can upgrade or downgrade your plan at any time. Upgrades take effect immediately, downgrades take effect at the next billing cycle.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Is there a free trial?</a>
<div class="accordion-content" data-tab-content>
<p>All plans come with a 14-day free trial, no credit card required.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">How do I cancel my subscription?</a>
<div class="accordion-content" data-tab-content>
<p>You can cancel your subscription at any time in account settings. Cancellations take effect at the end of the current billing cycle.</p>
</div>
</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
<script>
$(document).foundation();
// Monthly/Yearly toggle
$('#monthly-btn').on('click', function() {
$(this).removeClass('hollow');
$('#yearly-btn').addClass('hollow');
$('.monthly').show();
$('.yearly, .yearly-note').hide();
});
$('#yearly-btn').on('click', function() {
$(this).removeClass('hollow');
$('#monthly-btn').addClass('hollow');
$('.yearly, .yearly-note').show();
$('.monthly').hide();
});
</script>
</body>
</html>Pricing Table Best Practices
- Highlight Recommended Plan: Use visual effects to highlight the best choice
- Clear Comparison: Make it easy for users to compare different plans
- Concise Feature Lists: List the most important feature differences
- Clear CTAs: Use clear call-to-action buttons
- Flexible Billing Options: Provide monthly/yearly toggle
Summary
In this chapter, we learned:
- Creating basic pricing tables
- Three-column comparison pricing tables
- Highlighting recommended plans
- Monthly/yearly toggle
- Feature comparison tables
- Complete pricing page design
Next chapter, we will learn Foundation Top Bar.
Tip: Good pricing table design helps users make decisions quickly. Clearly showing the value differences between plans is the key.