Price

Overview

Examples

Default variation

Example
External Link
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

Example
External Link
From
$ 27
.50^
/mo
+GST
For the first 12 months
from $30/month
<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-storm-50">For the first <strong>12 months</strong></div>
  <div class="fg-berry"><del>from $30/month</del></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 #cr-marquee on Slack.

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 usage guidelines for this component, please reach out to #cr-marquee on Slack.