Pricing Options
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack's modular elements
at the Element Index Page ?
Basic List
A simple option useful as part of a multi-plan price offering. Use the class .boxed--emphasis in conjunction with a label to emphasise the most valued price option.
<div class="pricing pricing-1 boxed boxed--lg boxed--border">
<h3>Title</h3>
<span class="h2"><strong>$4.99</strong></span>
<span class="type--fine-print">Per Month, AUD Inlc GST.</span>
<hr>
<ul>
<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
</ul>
<a class="btn btn--primary" href="#">
<span class="btn__text">
Button Text
</span>
</a>
</div><!--end of pricing-->
Basic
$4.99 Per Month, AUD Inlc GST.
- 24/7 Phone Support
- Unlimited Skips
- Import CSV Data
- Automatic Transfer
Basic Text
A simple option useful as part of a basic price offering. Use the class .boxed--emphasis in conjunction with a label to emphasise the most valued price option.
<div class="pricing pricing-1 boxed boxed--border boxed--lg boxed--emphasis text-center">
<h4>Title</h4>
<span class="h1"><span class="pricing__dollar">$</span>79</span>
<p>
Description
</p>
<a class="btn btn--primary-1" href="#">
<span class="btn__text">
Button Text
</span>
</a>
</div><!--end pricing-->
Regular
$79
The regular license allows you to customize, store and even host your website using your platform
Value Purchase Now
Basic Image
A simple option useful as part of a basic price offering. Use the class .boxed--emphasis in conjunction with a label to emphasise the most valued price option.
<div class="pricing pricing-1 boxed boxed--border boxed--lg boxed--emphasis text-center">
<h4>Title</h4>
<span class="h1"><span class="pricing__dollar">$</span>79</span>
<img alt="Image" src="img/image.png" />
<p>
Description
</p>
<a class="btn btn--primary-1" href="#">
<span class="btn__text">
Button Text
</span>
</a>
</div><!--end pricing-->
Designer
$79 
The regular license allows you to customize, store and even host your website using your platform
Value Purchase Now
Wide List
A wider option suitable as part of a single or double-plan offering. Use a label to emphasise the most valued pricing option.
<div class="pricing pricing-2 boxed boxed--border boxed--lg row">
<div class="col-md-6 text-center">
<h5>Title</h5>
<span class="h1"><span class="pricing__dollar">$</span>50</span>
<p class="type--fine-print">Per Month, AUD.</p>
<a class="btn btn--primary" href="#">
<span class="btn__text">Button Text</span>
</a>
</div>
<div class="col-md-6">
<ul>
<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
</ul>
</div>
</div><!--end of pricing-->
Value
- 24/7 Phone Support
- Unlimited Skips
- Import CSV Data
- Automatic Transfer
- 100GB Storage
Minimal List
A minimally styled option ideal for use as part of 3 - 4 part plan offerings. Use a background class such as .bg--primary on the .pricing__head element to emphasise the most valued plan.
<div class="pricing pricing-3 text-center">
<div class="pricing__head bg--secondary boxed">
<h5>Title</h5>
<span class="h1"><span class="pricing__dollar">$</span>19</span>
<p class="type--fine-print">Per Month, AUD.</p>
</div>
<ul>
<li><span>Perk</span></li>
<li><span>Perk</span></li>
<li><span>Perk</span></li>
<li><span>Perk</span></li>
</ul>
</div><!--end pricing-->
Light
$19
Per Month, AUD.
- Anywhere Access
- 4GB Online Storage
- Import User Data
- Automatic Transfer
- 24/7 Support