Some Inspiration for Pricing Tables

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

PricingTablesInspiration

View demo Download source

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 27

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>