O3 World Component Library

Pricing 

<div class="u-margin-hug-top price__container">
    <p class="price__value">
        <span class="u-sr-only">Price: </span>$300.00
    </p>
</div>
<div class="u-margin-hug-top price__container">
    <del class="price__value price__value--slashed">
        <span class="u-sr-only">Price Reduced From: </span>$400.00
      </del>
    <ins class="price__value price__value--reduced">
        <span class="u-sr-only">Sale Price: </span>$300.00
      </ins>
</div>
 
{% for price in prices %}
  <div class="u-margin-hug-top price__container">
    {% if price.sale %}
      <del class="price__value price__value--slashed">
        <span class="u-sr-only">Price Reduced From: </span>${{ price.sale.price }}
      </del>
      <ins class="price__value price__value--reduced">
        <span class="u-sr-only">Sale Price: </span>${{ price.sale.salePrice }}
      </ins>
    {% else %}
      <p class="price__value">
        <span class="u-sr-only">Price: </span>${{ price.price }}
      </p>
    {% endif %}
  </div>
{% endfor %}
 
{
  "prices": [
    {
      "price": "300.00"
    },
    {
      "sale": {
        "price": "400.00",
        "salePrice": "300.00"
      }
    }
  ]
}
  • Content: 
    .price {

  &__container {
    display: flex;
    flex-flow: column nowrap;
    order: 2;

    @media (max-width: $breakpoint-lg) {
      width: 100%;
    }

    @media (min-width: $breakpoint-md) {
      order: 1;
    }
  }

  &__value {
    @include line-height(20, 32);
    @include font-size(20);

    order: 2;
    margin: 0 0 10px;
    width: 100%;
    font-family: $brand-font-b;
    color: color(neutral, dark);

    @media (min-width: $breakpoint-sm) and (max-width: $breakpoint-lg) {
      text-align: right;
    }

    @media (min-width: $breakpoint-sm) {
      order: 1;
      text-align: left;
    }

    &--slashed {
      @include line-height(12, 15);
      @include font-size(12);

      order: 2;
      text-decoration: line-through;
    }

    &--reduced {
      order: 1;
      margin-bottom: 0;
      text-decoration: none;
      color: color(primary, base);
    }
  }
}
  • URL: /components/raw/pricing/_pricing.scss
  • Filesystem Path: components/pricing/_pricing.scss
  • Size: 891 Bytes

Usage

When displaying prices, the most important aspect is good semantic markup and the adddition of as much detail as possible when it comes to screen readers. The u-sr-only class should be used to hide information that only needs to be shown to screen readers. The reason for this is visually, we can cross an original price out to show the sale price; however, for screen reader users, this visual indentification is not possible. Adding the screen reader class can allow screen readers to get extra information, such as, "Price Reduced From: " in order to subsitute visual information.

When displaying a sale price, the del and ins tags should be used to delete and insert the original price and sale price respectively.