Some Inspiration for Pricing Tables

A couple of styles and inspiration for responsive, flexbox-based HTML pricing tables.

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;
}

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!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 29

Comments are closed.
  1. What a lovely day! I was looking for better pricing table design and found your page. Thanks Mary!

  2. Well the first thing I notice was the Tibetan Names haha 😀 , anyways beautiful examples

  3. Excellent variants for the pricing table. Makes designing the otherwise/previously boring tables more fun to create 🙂

  4. 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

  5. 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?