Overview
This component is to be deprecated
The pricing calculator component is used primarily for calculating the amount Essentials Payroll would cost depending on team size and frequency. This is used with the New Zealand range of Essentials with Payroll.
Examples
Default variation
How much will I pay for payroll?
From
$
27
.50
/mo
+GST
<div class="pricing-calculator row" id="htmlId" data-myob-pricing-calculator data-country="nz" data-product="EP-BND-NZ">
<div class="col col-12--sm col-12--md col-6">
<div class="pricing-calculator__fields">
<h3 class="pricing-calculator__title">How much will I pay for payroll?</h3>
<form action="" class="form">
<div class="input form__group">
<label class="input__label">Number of employees</label>
<input type="number" class="input__field pricing-calculator__employees" pattern="[0-9]" name="Employees"
value="10" step="1" min="1" max="7000000">
</div>
<div class="form__group">
<label for="" class="">How often is payroll processed?</label>
<div class="tabs" data-myob-tabs role="tablist">
<div class="tabs__menu">
<ul class="tabs__list">
<li class="tabs__title" role="presentation" data-value="weekly">
<a href="#htmlId-weekly" role="tab" aria-controls="weekly-option" aria-selected="false" id="htmlId-weekly-label">Weekly</a>
</li>
<li class="tabs__title" role="presentation" data-value="fortnightly">
<a href="#htmlId-fortnightly" role="tab" aria-controls="fortnightly-option" aria-selected="false" id="htmlId-fortnightly-label">Fortnightly</a>
</li>
<li class="tabs__title is-active" role="presentation" data-value="monthly">
<a href="#htmlId-monthly" role="tab" aria-controls="monthly-option" aria-selected="true" id="htmlId-monthly-label">Monthly</a>
</li>
</ul>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col col-12--sm col-12--md col-6">
<div class="pricing-calculator__results bg-grey-800 text-center">
<div class="progress-indicator progress-indicator--md"></div>
<div class="price">
<div>From</div>
<span class="price__currency">$</span>
<span class="price__amount">27</span>
<div class="price__suffix text-left">
<div class="price__decimal">.50</div>
<div class="price__frequency">/mo</div>
<div class="price__info">+GST</div>
</div>
</div>
<div class="pricing-calculator__terms small"></div>
<div class="pricing-calculator__buttons">
<div class="btn-group btn-group--block">
<a href="" id="htmlId-trial-link" class="btn btn--primary">Try FREE for 30 days</a>
<a href="" id="htmlId-buy-link" class="btn btn--bordered-mono">Buy now</a>
</div>
</div>
</div>
</div>
</div>
Usage guidelines
We're so sorry, there are currently no usage guidelines for this component 😥
If you feel you can help out your fellow designers by creating usage guidelines for this component, please reach out to @marquee on the #astridd Slack channel.
Implementation guidelines
We're so sorry, there are currently no implementation guidelines for this component 😥
If you feel you can help out your fellow designers by creating implementation guidelines for this component, please reach out to @marquee on the #astridd Slack channel.