<div class="price-bulk-price--regular">
<div class="price-bulk-price__row">
<div class="price-bulk-price__column">
<div class="price-bulk-price__amount-row" aria-hidden="true">
<div class="price-bulk-price__amount-column">
<div class="price-bulk-price__amount">
<span class="price__desktop-only">ab </span>3<span class="price__mobile-only">+</span>:
</div>
</div>
<div class="price-bulk-price__amount-column">
<div class="price-bulk-price__amount">
<span class="price__desktop-only">ab </span>10<span class="price__mobile-only">+</span>:
</div>
</div>
</div>
<div class="price-bulk-price__value-row">
<div class="price-bulk-price__value-column">
<span class="visually-hidden">ab 3: CHF 8.90</span>
<div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
<div class="price-bulk-price__value" aria-hidden="true">9</div>
</div>
<div class="price-bulk-price__value-column">
<span class="visually-hidden">ab 10: CHF 8.90</span>
<div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
<div class="price-bulk-price__value" aria-hidden="true">9</div>
</div>
</div>
</div>
<div class="price-bulk-price__column">
<div class="price-bulk-price__amount-row" aria-hidden="true">
<div class="price-bulk-price__amount-column">
<div class="price-bulk-price__amount">
<span class="price__desktop-only">ab </span>20<span class="price__mobile-only">+</span>:
</div>
</div>
<div class="price-bulk-price__amount-column">
<div class="price-bulk-price__amount">
<span class="price__desktop-only">ab </span>25<span class="price__mobile-only">+</span>:
</div>
</div>
</div>
<div class="price-bulk-price__value-row">
<div class="price-bulk-price__value-column">
<span class="visually-hidden">ab 20: CHF 7.00</span>
<div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
<div class="price-bulk-price__value" aria-hidden="true">7</div>
</div>
<div class="price-bulk-price__value-column">
<span class="visually-hidden">ab 25: CHF 6.50</span>
<div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
<div class="price-bulk-price__value" aria-hidden="true">7</div>
</div>
</div>
</div>
<div class="price-bulk-price__column">
<div class="price-bulk-price__amount-row" aria-hidden="true">
<div class="price-bulk-price__amount-column">
<div class="price-bulk-price__amount">
<span class="price__desktop-only">ab </span>30<span class="price__mobile-only">+</span>:
</div>
</div>
<div class="price-bulk-price__amount-column">
<div class="price-bulk-price__amount">
<span class="price__desktop-only">ab </span>35<span class="price__mobile-only">+</span>:
</div>
</div>
</div>
<div class="price-bulk-price__value-row">
<div class="price-bulk-price__value-column">
<span class="visually-hidden">ab 30: CHF 5.50</span>
<div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
<div class="price-bulk-price__value" aria-hidden="true">6</div>
</div>
<div class="price-bulk-price__value-column">
<span class="visually-hidden">ab 35: CHF 5.40</span>
<div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
<div class="price-bulk-price__value" aria-hidden="true">5</div>
</div>
</div>
</div>
<div class="price-bulk-price__column">
<div class="price-bulk-price__amount-row" aria-hidden="true">
<div class="price-bulk-price__amount-column">
<div class="price-bulk-price__amount">
<span class="price__desktop-only">ab </span>40<span class="price__mobile-only">+</span>:
</div>
</div>
</div>
<div class="price-bulk-price__value-row">
<div class="price-bulk-price__value-column">
<span class="visually-hidden">ab 40: CHF 5.20</span>
<div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
<div class="price-bulk-price__value" aria-hidden="true">5</div>
</div>
</div>
</div>
</div>
</div>
{% include '@SharedComponents/modules/shared-product/components/price-bulk-price/price-bulk-price.twig' %}
{
"labels": {
"from": "ab"
},
"bulkPrices": {
"3": {
"currency": "CHF",
"price": "8.90"
},
"10": {
"currency": "CHF",
"price": "8.90"
},
"20": {
"currency": "CHF",
"price": "7.00"
},
"25": {
"currency": "CHF",
"price": "6.50"
},
"30": {
"currency": "CHF",
"price": "5.50"
},
"35": {
"currency": "CHF",
"price": "5.40"
},
"40": {
"currency": "CHF",
"price": "5.20"
}
},
"variant": "regular"
}
import './price-bulk-price.scss';
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared-product/components/price-bulk-price/price-bulk-price";
See the product price component for usage documentation.