Cards

vAPP's cards provide a flexible and extensible content container with multiple variants and options.

Open Bootstrap Docs

vAPP Cards

Variation one


$ 19 / mo
team
  • 1000 Messages per month
  • 10 GB file storage
  • 50 Projects per month
  • Premium support
Try 14 Days free trial

                                        <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
Get started now

                                        <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>