#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:
<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:
<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
<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
<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
<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
<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
<!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.