From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
Today we’d like to share some inspiration for pricing tables with you. Pricing tables are an essential component on websites where digital services are offered. While there seems to be a common pattern, there are infinite styling possibilities. This demo shows some ideas.
Please note that this is for inspiration only and that we use CSS properties which only work in modern browsers.
We use the following structure for most of the designs:
<div class="pricing pricing--sonam">
<div class="pricing__item">
<h3 class="pricing__title">Startup</h3>
<div class="pricing__price"><span class="pricing__currency">$</span>9.90</div>
<p class="pricing__sentence">Small business solution</p>
<ul class="pricing__feature-list">
<li class="pricing__feature">Unlimited calls</li>
<li class="pricing__feature">Free hosting</li>
<li class="pricing__feature">40MB of storage space</li>
</ul>
<button class="pricing__action">Choose plan</button>
</div>
<div class="pricing__item">
<h3 class="pricing__title">Standard</h3>
<div class="pricing__price"><span class="pricing__currency">$</span>29,90</div>
<p class="pricing__sentence">Medium business solution</p>
<ul class="pricing__feature-list">
<li class="pricing__feature">Unlimited calls</li>
<li class="pricing__feature">Free hosting</li>
<li class="pricing__feature">10 hours of support</li>
<li class="pricing__feature">Social media integration</li>
<li class="pricing__feature">1GB of storage space</li>
</ul>
<button class="pricing__action">Choose plan</button>
</div>
<div class="pricing__item">
<h3 class="pricing__title">Professional</h3>
<div class="pricing__price"><span class="pricing__currency">$</span>59,90</div>
<p class="pricing__sentence">Gigantic business solution</p>
<ul class="pricing__feature-list">
<li class="pricing__feature">Unlimited calls</li>
<li class="pricing__feature">Free hosting</li>
<li class="pricing__feature">Unlimited hours of support</li>
<li class="pricing__feature">Social media integration</li>
<li class="pricing__feature">Anaylitcs integration</li>
<li class="pricing__feature">Unlimited storage space</li>
</ul>
<button class="pricing__action">Choose plan</button>
</div>
</div>
The common style for all table designs is the following:
.pricing {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin: 0 auto 3em;
}
.pricing__item {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
flex: 0 1 330px;
}
.pricing__feature-list {
text-align: left;
}
.pricing__action {
color: inherit;
border: none;
background: none;
}
.pricing__action:focus {
outline: none;
}
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
As you can see, we are using flexbox. Please note that this is a modern property and is only fully supported by the latest browsers.
An example style is the following:
/* Sonam */
.pricing--sonam .pricing__item {
margin: 1.5em;
padding: 2em;
cursor: default;
border-radius: 10px;
background: #1F1F1F;
box-shadow: 0 5px 20px rgba(0,0,0,0.05), 0 15px 30px -10px rgba(0,0,0,0.3);
transition: background 0.3s;
}
.pricing--sonam .pricing__item:hover {
background: #141315;
}
.pricing--sonam .pricing__title {
font-size: 2em;
width: 100%;
margin: 0 0 0.25em;
padding: 0 0 0.5em;
border-bottom: 3px solid rgb(27, 26, 28);
}
.pricing--sonam .pricing__price {
color: #E06060;
font-size: 1.75em;
padding: 1em 0 0.75em;
}
.pricing--sonam .pricing__sentence {
font-weight: bold;
}
.pricing--sonam .pricing__feature-list {
margin: 0;
padding: 1em 1.25em 2em;
}
.pricing--sonam .pricing__action {
font-weight: bold;
margin-top: auto;
padding: 0.75em 2em;
border-radius: 5px;
background: #E06060;
transition: background 0.3s;
}
.pricing--sonam .pricing__action:hover,
.pricing--sonam .pricing__action:focus {
background: #BD3C3C;
}
We hope you enjoyed these effects and get inspired!
These are beautiful and varied. Kudos.
All your posts make me happy:)
Nice inspiration ^_^
BG color and color of content is harmonies 😀
What a lovely day! I was looking for better pricing table design and found your page. Thanks Mary!
Wow! Simply beautiful. Thank you for sharing 🙂
Yeah !
🙂
tables so gorgeous.
Well the first thing I notice was the Tibetan Names haha 😀 , anyways beautiful examples
Your work is always superb. Thanks for sharing these posts
Cool!
If they’re tables then why are you not using tables?
Really superb work as always. Thanks a lot for sharing with us.
Bravo
Excellent variants for the pricing table. Makes designing the otherwise/previously boring tables more fun to create 🙂
Such a wonderful tutorials i have ever found. Nice work Keep updates
Very good, learned, thank you
Thanks for the stellar pricing example. Your design really makes use of CSS3 but I want to implement a few more customizations as I try and display a similar experience on older browsers.
Would love more of the in-depth tutorials I’ve grown to love from back in the day!
Cheers,
David
WOW! Awesome. thank you for sharing 😉
Is it just me or is there an over use of classes in the HTML? Why add “class=’pricing__feature'” to every li, when you can select them with “.pricing__feature-list li”? Maybe it’s just me. Is there some sort of SEO bonus earned from developing like this?
Same question here
It comes from the BEM naming convention
Classic. Totally loved the tutorial. Thanks.
Woh. Thats a lot of pricing elements. You have so much time.
what about LICENSE
When ever I use a href in the buttons the pricing table breaks!
instead of href use <a>
It works perfectly.
Nossa muito bom..amei.
I love it. how can i use same pricing table to horizontal ?