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-light-grey 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-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="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-grey ">
         <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

/ month
Unlimited user access
Unlimited user access

Standard

$5.99

/ month
Unlimited user access