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
$79The regular license allows you to customize, store and even host your website using your platform
Value Purchase NowBasic 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
$79The regular license allows you to customize, store and even host your website using your platform
Value Purchase NowWide 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-lg-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-lg-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-->
- 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
$19Per Month, AUD.
- Anywhere Access
- 4GB Online Storage
- Import User Data
- Automatic Transfer
- 24/7 Support