109 lines
3.3 KiB
HTML
109 lines
3.3 KiB
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> |