Elements

These modular elements can be readily used and customized across pages and in different blocks.


	<div class="card pricing text-center">
		<h2>Economy</h2>
		<span>Plan Short Description</span>
		<div class="card-header text-center">
			<span class="price">0</span><span class="currency">USD/Year</span>
		</div>
		<div class="card-block">
			<ul class="list-group no-border text-center">
				<li class="list-group-item"><i class="fa fa-thumbs-up" aria-hidden="true"></i> Unlimited Storage</li>
				<li class="list-group-item"><i class="fa fa-globe" aria-hidden="true"></i> Unlimited Websites</li>
				<li class="list-group-item"><i class="fa fa-signal" aria-hidden="true"></i> Unlimited Bandwidth</li>
				<li class="list-group-item"><i class="fa fa-rocket" aria-hidden="true"></i> 4X Processing Power</li>
				<li class="list-group-item"><i class="fa fa-star" aria-hidden="true"></i> Premium DNS</li>
				<li class="list-group-item"><i class="fa fa-envelope" aria-hidden="true"></i>1000 Email Addresses</li>
			</ul>
			<a href="#" class="btn btn-secondary-outlined btn-default">Get Started</a>
		</div>
	</div>

	<!-- Pricing style 2 -->
	<div class="price-card ">
		<h2>Personal</h2>
		<p>The standard version</p>
		<p class="price"><span>49</span>/ Month</p>
		<ul class="pricing-offers">
			<li>6 Domain Names</li>
			<li>8 E-Mail Address</li>
			<li>10GB Disk Space</li>
			<li>Monthly Bandwidth</li>
			<li>Powerful Admin Panel</li>
		</ul>
		<a href="#" class="btn btn-inverse btn-mid">Buy Now</a>
	</div>
How to use
  • This Pricing tables are wrapped in bootstrap 4 cards
  • Use .pricing class with .card
  • For special package you can use any specific classname with .pricing and can overwrite style with that class. We use special class .delux to overwrite default style
  • For the style shown in example 2, use .price-card wrapper

Example:1

Economy

Plan Short Description
0USD/Year
  • Unlimited Storage
  • Unlimited Websites
  • Unlimited Bandwidth
  • 4X Processing Power
  • Premium DNS
  • 1000 Email Addresses
Get Started

Deluxe

Plan Short Description
20USD/Year
  • Unlimited Storage
  • Unlimited Websites
  • Unlimited Bandwidth
  • 4X Processing Power
  • Premium DNS
  • 1000 Email Addresses
Get Started

Ultimate

Plan Short Description
50USD/Year
  • Unlimited Storage
  • Unlimited Websites
  • Unlimited Bandwidth
  • 4X Processing Power
  • Premium DNS
  • 1000 Email Addresses
Get Started

Example: 2

Personal

The standard version

49/ Month

  • 6 Domain Names
  • 8 E-Mail Address
  • 10GB Disk Space
  • Monthly Bandwidth
  • Powerful Admin Panel
Buy Now

Student

The standard version

69/ Month

  • 6 Domain Names
  • 8 E-Mail Address
  • 10GB Disk Space
  • Monthly Bandwidth
  • Powerful Admin Panel
Buy Now

Business

The standard version

89/ Month

  • 6 Domain Names
  • 8 E-Mail Address
  • 10GB Disk Space
  • Monthly Bandwidth
  • Powerful Admin Panel
Buy Now 

	<div class="card pricing_image-card delux">
		<div class="card_img">
			<img class="card-img img-full" src="assets/img/profile/work7.jpg" alt="Card image">
			<div class="overlay text-center">
				<h2>Deluxe Plan</h2>
				<span>Plan Short Description</span>
			</div>
		</div>
		<div class="card-block text-center">
			<div class="circle"><span class="price">$20</span> <span class="tag">per hour</span> </div>
			<p>
				Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim.
			</p>
			<a href="#" class="btn btn-inverse btn-mid">Buy Now
		</div>
	</div>
How to use
  • Pricing table with image styled with adding .pricing_image-card with .card
  • For custome designed you can follow the same isntruction as mentioned in example 1 instruction no 4

Example

Card image

Economy Plan

Plan Short Description
$20 per hour

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim.

Buy Now
Card image

Deluxe Plan

Plan Short Description
$20 per hour

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim.

Buy Now
Card image

Ultimate Plan

Plan Short Description
$20 per hour

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim.

Buy Now 

	<div class="card pricing style2">
		<div class="card-block">
			<div class="circle">
				<span class="price">$55</span>
				<span class="tag">Per Hour</span>
			</div>
			<h2>Deluxe Plan</h2>
			<p>
				Enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
			</p>
			<a class="btn btn-secondary-outlined btn-default">Get Started</a>
		</div>
	</div>
how to use
  • This is another pricing table style. to get this design use class .style2 with .pricing

Example

$55 Per Hour

Deluxe Plan

Enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Get Started
$55 Per Hour

Economy Plan

Enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Get Started