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

Purchase Plan

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

Medium User

$50

Per Month, AUD.

Purchase Plan

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

Looking for styled pricing sections?

View Pricing Sections