Default variation
From
$
27
.50
/mo
+GST
<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>Discount variation
From
$
27
.50^
/mo
+GST
For the first 12 months
<div class="text-center">
<div class="price mb-min">
<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<span class="price__caret">^</span></div>
<div class="price__frequency">/mo</div>
<div class="price__info">+GST</div>
</div>
</div>
<div class="fg-grey-500">For the first <strong>12 months</strong></div>
<div class="fg-red"><del>from $30/month</del></div>
</div>Align left variation
from
$
27
.50^
/mo +GST
<div class="price price--left mb-1">
<div class="fg-grey-700">from</div>
<span class="price__currency">$</span>
<span class="price__amount">27</span>
<div class="price__suffix text-left">
<div class="price__decimal"><strong>.50<span class="price__caret">^</span></strong></div>
<div class="price__frequency"><strong>/mo +GST</strong></div>
</div>
</div>Discount align left variation
from
$
27
.50^
/mo +GST
For the first 12 months
<div class="price price--left mb-1">
<div class="fg-grey-700">from</div>
<span class="price__currency">$</span>
<span class="price__amount">27</span>
<div class="price__suffix text-left">
<div class="price__decimal"><strong>.50<span class="price__caret">^</span></strong></div>
<div class="price__frequency"><strong>/mo +GST</strong></div>
</div>
</div>
<div class="fg-grey-700">For the first <strong>12 months</strong></div>
<div class="fg-red"><del><strong>from $30/month</strong></del></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.