Pricing Tables
Ignited CSS comes with some simple markup for pricing tables.
<div class="row"> <div class="col"> <div class="panel br drop-shadow bg-white pos-rel"> <div class="badge badge-info pos-abs top-0 left-0 p">Most popular</div> <div class="row"> <div class="col no-margin h-a"> <h1 class="text-primary">Premium</h1> </div> </div> <div class="row"> <div class="col v-a h-a"> <div class="m-r"> <h1>$12.99</h1> </div> <span class="text-bold">/ month</span> </div> </div> <div class="row"> <div class="col h-a bg-white "> <i data-feather="x" class="bg-light br-full b p icon "></i> <div class="m-l v-a text-muted">Unlimited user access</div> </div> </div> <div class="row"> <div class="col h-a no-margin"> <i data-feather="check" class="bg-primary br-full p icon"></i> <div class="m-l v-a">Unlimited user access</div> </div> </div> <div class="gap"></div> <div class="row m-t"> <button class="btn btn-primary col no-margin m-t"> Buy now </button> </div> <div class="row"> <button class="btn btn-white col no-margin m-t">Buy later</button> </div> </div> </div> <div class="col"> <div class="panel br drop-shadow bg-light "> <div class="row"> <div class="col no-margin h-a"> <h1 class="text-muted">Standard</h1> </div> </div> <div class="row"> <div class="col v-a h-a"> <div class="m-r"> <h1>$5.99</h1> </div> <span class="text-bold text-muted">/ month</span> </div> </div> <div class="row"> <div class="col h-a bg-light "> <i data-feather="x" class="bg-light br-full b p icon "></i> <div class="m-l v-a text-muted">Unlimited user access</div> </div> </div> <div class="gap"></div> <div class="row"> <button class="btn btn-white col no-margin m-t">Buy later</button> </div> </div> </div> </div>
Most popular
Premium
$12.99
Unlimited user access
Unlimited user access
Standard
$5.99
Unlimited user access