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>

						
How to use
  • This Pricing tables are wrapped in bootstrap 4 cards
  • Use .pricing class with .card
  • You can change the contents of each elements using the same class name to get the same stylings
  • For special package you can use any specific classname with .pricing and can overwrite style with that class. in example 2, we use special class .delux to overwrite default style

Example

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

	<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 ut labore.
			</p>
			<div class="btn btn-secondary-outlined btn-default">Get Started</div>
		</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 ut labore.

Get Started
Card image

Deluxe Plan

Plan Short Description
$20 per hour

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

Get Started
Card image

Ultimate Plan

Plan Short Description
$20 per hour

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

Get Started

	<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 ut labore 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 ut labore veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Get Started
$55 Per Hour

Economy Plan

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

Get Started