Elements
These modular elements can be readily used and customized across pages and in different blocks.
pricing <> show code
<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
Deluxe
Plan Short Description
20USD/Year
- Unlimited Storage
- Unlimited Websites
- Unlimited Bandwidth
- 4X Processing Power
- Premium DNS
- 1000 Email Addresses
Ultimate
Plan Short Description
50USD/Year
- Unlimited Storage
- Unlimited Websites
- Unlimited Bandwidth
- 4X Processing Power
- Premium DNS
- 1000 Email Addresses
Pricing Table with Image <> show code
<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
$20 per hour
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim ut labore.
Get Started$20 per hour
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim ut labore.
Get Started$20 per hour
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim ut labore.
Get StartedPricing Table <> show code
<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