pricing.html

<section>

	
	<div class="help-content">
		<h3 class="info-title smaller" data-id="#pages/pricing">Pricing Tables</h3>
		<!-- #section:pages/pricing -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Pricing tables are widget boxes with a few additonal class names.
				<br />
				For more info about pricing page see:
				<br />
				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/</span>pricing.mustache</code>
				<br />
				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/</span>pricing/package-large.mustache</code>
				<br />
				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/</span>pricing/package-small.mustache</code>
			</li>
			
			<li>
				Small pricing style consist of header and body:
<pre data-language="html">
 <div class="pricing-span-header col-xs-4 col-sm-3">
  ...
 </div>
 <div class="pricing-span-body col-xs-8 col-sm-9">
   <div class="pricing-span">
	 <!-- widget boxes here -->
   </div>
 </div>
</pre>

		</li>
		<li>
		    <!-- #section:pages/pricing.small-header -->
			Header which contains feature list is a widget box and has a <code>.pricing-table-header.list-striped</code> inside it:
<pre data-language="html">
 <div class="widget-box transparent">
   <div class="widget-header"><h5 class="widget-title">Package Name</h5></div>
   <div class="widget-body">
     <div class="widget-main no-padding">
       <ul class="pricing-table-header list-striped list-unstyled">
          <li>...</li>
          <li>...</li>
          <li>...</li>
       </ul>
     </div><!-- /.widget-main -->
   </div><!-- /.widget-body -->
 </div><!-- /.widget-box -->
</pre>

			<!-- /section:pages/pricing.small-header -->
			</li>
			
			<li>
				<!-- #section:pages/pricing.small-body -->
				Also body consists of several widget boxes with <code>.pricing-box-small</code> class
				and a <code>.list-striped.pricing-table</code> list and a <code>.price</code> inside it:
<pre data-language="html">
 <div class="pricing-box-small widget-box widget-color-blue">
   <div class="widget-header"><h5 class="widget-title bigger lighter">Name</h5></div>
   <div class="widget-body">
      
      <div class="widget-main no-padding">
         <ul class="pricing-table list-striped list-unstyled">
            <li>...</li>
            <li>...</li>
            <li>...</li>
         </ul>

         <div class="price">
            <span class="label label-lg label-inverse arrowed-in arrowed-in-right">
               $5<small>/month</small>
            </span>
         </div>
      </div><!-- /.widget-main -->

      <div>
          <a href="#" class="btn btn-block btn-sm btn-primary"><span>Buy</span></a>
      </div>

   </div><!-- /.widget-body -->
 </div><!-- /.widget-box -->
</pre>

				<!-- /section:pages/pricing.small-body -->
			</li>
			
			<li>
				<!-- #section:pages/pricing.large -->
				Large pricing tables are widget boxes with <code>.pricing-box</code> class:
<pre data-language="html">
<div class="row">
   <div class="pricing-box col-xs-6 col-sm-3">
   </div>
   ...
</div>
</pre>
				<!-- /section:pages/pricing.large -->
			</li>

		 </ul>
		</div>
		<!-- /section:pages/pricing -->

	</div>
	
</section>