<div class="price  ">
    <span class="price__value price__value--old ">
        <del aria-label="Price reduced from: $249.95">
            $
            249.95

        </del>
    </span>
    <span class="price__value price__value--special ">
        <ins aria-label="On sale at: $159.95">

            $

            159.95

        </ins>
    </span>
</div>
<div class="price {{ class }} {{{ attributes }}}">
{{#if specialPrice }}
    <span class="price__value price__value--old {{ oldPriceClass }}">
        <del aria-label="Price reduced from: {{#if prefix.text}}{{prefix.text}}{{/if}}{{regularPrice}}{{#if suffix.text}}{{suffix.text}}{{/if}}">
            {{#if prefix.tag}}
                <{{prefix.tag}}>
            {{/if}}
                {{prefix.text}}
            {{#if prefix.tag}}
                </{{tag}}>
            {{/if}}
            {{regularPrice}}
            {{#if suffix.tag}}
                <{{suffix.tag}}>
            {{/if}}
                {{suffix.text}}
            {{#if suffix.tag}}
                </{{suffix.tag}}>
            {{/if}}
        </del>
    </span>
    <span class="price__value price__value--special {{ specialPriceClass }}">
        <ins aria-label="On sale at: {{#if prefix.text}}{{prefix.text}}{{/if}}{{specialPrice}}{{#if suffix.text}}{{suffix.text}}{{/if}}">
            {{prefix.tag}}
                {{prefix.text}}
            {{prefix.closingTag}}
            {{specialPrice}}
            {{suffix.tag}}
                {{suffix.text}}
            {{suffix.closingTag}}
        </ins>
    </span>
{{else}}
    <span class="price__value {{ regularPriceClass }}">
        {{prefix.tag}}
            {{prefix.text}}
        {{prefix.closingTag}}
        {{regularPrice}}
        {{suffix.tag}}
            {{suffix.text}}
        {{suffix.closingTag}}
    </span>
{{/if}}
</div>
{
  "regularPrice": "249.95",
  "specialPrice": "159.95",
  "prefix": {
    "tag": "",
    "text": "$",
    "closingTag": ""
  },
  "suffix": {
    "tag": "",
    "text": "",
    "closingTag": ""
  },
  "oldPriceClass": "",
  "regularPriceClass": "",
  "specialPriceClass": ""
}
  • Content:
    $price__spacing                : $spacer--small !default;
    $price__font-size              : $font-size-extra-large !default;
    $price__font-size\@medium      : $font-size-large !default;
    $price__font-weight            : $font-weight-bold !default;
    
    $price__color--old             : $color-secondary !default;
    $price__font-size--old         : $font-size-small !default;
    $price__font-size--old\@medium : $font-size-base !default;
    $price__font-weight--old       : $font-weight-normal !default;
    
    $price__color--special         : $theme-primary !default;
    $price__font-weight--special   : $font-weight-bold !default;
    
    $price__text-color             : $color-secondary !default;
    $price__text-font-size         : $font-size-base !default;
    $price__text-font-size\@medium : $font-size-medium !default;
    
  • URL: /components/raw/price/_price-variables.scss
  • Filesystem Path: build/components/Molecules/price/_price-variables.scss
  • Size: 789 Bytes
  • Content:
    @import 'price-variables';
    
    .price {
        &__value {
            font-size: $price__font-size;
            font-weight: $price__font-weight;
    
            @include mq($screen-m) {
                font-size: $price__font-size\@medium;
            }
    
            &--old {
                margin-right: $price__spacing;
                color: $price__color--old;
                font-size: $price__font-size--old;
                font-weight: $price__font-weight--old;
                text-decoration: line-through;
    
                @include mq($screen-m) {
                    font-size: $price__font-size--old\@medium;
                }
            }
    
            &--special {
                color: $price__color--special;
                font-weight: $price__font-weight--special;
    
                & > ins {
                    text-decoration: none;
                }
            }
        }
    
        &__text {
            color: $price__text-color;
            font-size: $price__text-font-size;
            font-weight: $price__font-weight--old;
    
            @include mq($screen-m) {
                font-size: $price__text-font-size\@medium;
            }
        }
    }
    
  • URL: /components/raw/price/_price.scss
  • Filesystem Path: build/components/Molecules/price/_price.scss
  • Size: 1 KB

There are no notes for this item.