background

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 Image

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">
	<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