Cards
vAPP's cards provide a flexible and extensible content container with multiple variants and options.
Open Bootstrap DocsvAPP Cards
Variation one
$
19
/ mo
team
- 1000 Messages per month
- 10 GB file storage
- 50 Projects per month
- Premium support
<div class="col-12 col-md-4">
<div class="card text-center bg-white rounded--10 border-0 mb-50 mb-md-0">
<div class="card-body pt-40 pb-55">
<div class="d-flex justify-content-center">
<span class="font-size--21 font-w--300 text-color--700 mt-10 mr-5">$</span>
<span class="font-size--60 font-w--300 text-color--700">19</span>
<span class="font-size--21 font-w--300 text-color--700 d-flex align-items-center ml-3">/ mo</span>
</div>
<div class="badge mb-35">
<span class="font-size--18 font-w--500 text-t--capitalize">team</span>
</div>
<ul class="list-group mb-40">
<li>1000 Messages per month</li>
<li>10 GB file storage</li>
<li>50 Projects per month</li>
<li>Premium support</li>
</ul>
<a href="#" class="btn btn-bg--primary btn-size--md btn-color--white box-shadow--1 btn-hover">
Try 14 Days free trial
</a>
</div>
</div>
<!-- card end -->
</div>
Variation Two
Individual
free
- 1000 Messages per month
- 10 GB file storage
- 50 Projects per month
- Premium support
<div class="col-12 col-md-4 mb-50 mb-md-0">
<div class="card text-center border-color-light--3 rounded--10 py-40">
<div class="card-body">
<span class="font-size--18 font-w--500 text-color--400 text-t--capitalize pb-10">Individual</span>
<h2 class="text-t--uppercase pb-35">free</h2>
<ul class="list-group mb-40">
<li>1000 Messages per month</li>
<li>10 GB file storage</li>
<li>50 Projects per month</li>
<li>Premium support</li>
</ul>
<a href="#" class="btn btn-outline btn-outline--md btn-color--primary border-color-primary btn-bg-hover--primary text-left rounded--8 btn-hover">
<span class="btn-text transition-default">
Get started now
<i class="ml-35 font-w--600 nc-icon nc-tail-right"></i>
</span>
</a>
</div>
</div>
<!-- card end -->
</div>
Variation Three
Technology
Mar 23, 2018
For Women Only Your Computer Usage Could Cost You Your Job
Sitting proudly atop M3565 is the two-storey penthouse. The master bedroom suite is phenomenally spacious and opens…
Get started now
<div class="col-12 col-md-6">
<div class="card border-0">
<a class="mb-45" href="#">
<img src="img/blog-home-1.png" alt="" class="rounded--default img-fluid">
</a>
<div class="card-body">
<div class="d-flex mb-12">
<span class="category-links font-size--14 font-w--600 text-t--uppercase mr-25"><a href="#" class="text-color--400">Technology</a></span>
<span class="text-color--400 font-size--14 font-w--600 text-t--uppercase">Mar 23, 2018</span>
</div>
<h5><a href="#" class="card-title font-size--32 line-height--42 font-w--600 text-color--700 mb-18">For Women Only Your Computer Usage Could Cost You Your Job</a></h5>
<p class="mb-30">Sitting proudly atop M3565 is the two-storey penthouse. The master bedroom suite is phenomenally spacious and opens… </p>
<a class="btn-link text-color--primary text-hover--primary" href="#">
<span class="btn-text">
Get started now
<i class="nc-icon nc-tail-right ml-25 font-w--600"></i>
</span>
</a>
</div>
</div>
<!-- card end -->
</div>