Some Inspiration for 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!