Employer Style Base Pattern Library

Price Per Time 

<div class="price-per-time">
    <span class="price-per-time--amount">
    <span class="price-per-time--currency">$</span>299
    </span>
    <span class="price-per-time--time">/ month</span>
</div>
 
<div class="price-per-time">
  <span class="price-per-time--amount">
    <span class="price-per-time--currency">$</span>299
  </span>
  <span class="price-per-time--time">/ month</span>
</div>
 
/* No context defined for this component. */
  • Content: 
    @mixin price-per-time {
  &--currency {
    font-size: 0.9375rem;
    vertical-align: super;
  }

  &--amount {
    font-weight: $font-weight-regular;
    font-size: 1.875rem;
  }

  &--time {
    font-weight: $font-weight-regular;
    font-size: $font-size-small;
    text-transform: lowercase;
  }
}
  • URL: /components/raw/price_per_time/_price_per_time.scss
  • Filesystem Path: sass/directives/02_base_components/price_per_time/_price_per_time.scss
  • Size: 302 Bytes
  • Handle: @price_per_time
  • Preview:
  • Filesystem Path: sass/directives/02_base_components/price_per_time/price_per_time.hbs

Styles a price per time, e.g. “$100/month”