Pricebox

A price field contains information about the price of a product and may vary according to content, styling and context.

Standard pricebox#

A default pricebox can contain any informations that are legally and organizational required like the price itself, a prefix, asterisk, currency and additional informations like the basic quantity.

The pricebox is created with any semantically valid tag with the class .pricebox applied to it. The pricebox then has the display-property display: inline-block. With this property you can place the pricebox inline to any element you'd like to. But please consider, that the pricebox will have as a default the maximum width of the parents size. If the price would exceed this width, the pricebox will overflow because the price can't break by configuration. Otherwise the sensitive price may no longer be legible.

The price itself is wrapped by three elements with the classes .pricebox-wrapper, .pricebox-container and .pricebox-price-wrapper. Inside the .pricebox-price-wrapper element there can be an

  • prefix (.pricebox-prefix)
  • price (.pricebox-price)
  • asterisk (.pricebox-asterisk)
  • currency (.pricebox-currency)

To get the correct structure, the asterisk and currency has to be wrapped by an additional element with .pricebox-suffix. All the contents of the above elements should be short and expressive, otherwise the pricebox could break on small screen-sizes.

To show even more information you can use the element .pricebox-basic-quantity which should be placed after the .pricebox-wrapper.

We recommended to add an aria-label to the .pricebox-price-wrapper and fill it with the price informations (prefix, price, currency, asterisk) for accessibility reasons.

For more information, see the WAI-ARIA Authoring Practices.

standard small#

preview

<div class="pricebox">
    <div class="pricebox-wrapper">
        <div class="pricebox-container">
            <div class="pricebox-price-wrapper" aria-label="from 9.999,99 CHF *">
                <span class="pricebox-prefix">from</span>
                <span class="pricebox-price">9.999,99</span>
                <div class="pricebox-suffix">
                    <span class="pricebox-asterisk">*</span>
                    <span class="pricebox-currency">CHF</span>
                </div>
            </div>
        </div>
    </div>
    <div class="pricebox-basic-quantity">88kg = -.88 CHF</div>
</div>

Minimum variant#

preview

<div class="pricebox">
    <div class="pricebox-wrapper">
        <div class="pricebox-container">
            <div class="pricebox-price-wrapper" aria-label="59,59">
                <span class="pricebox-price">59,59</span>
            </div>
        </div>
    </div>
</div>

Prefix#

preview

<div class="pricebox">
    <div class="pricebox-wrapper">
        <div class="pricebox-container">
            <div class="pricebox-price-wrapper" aria-label="prefix 24,56">
                <span class="pricebox-prefix">prefix</span>
                <span class="pricebox-price">24,56</span>
            </div>
        </div>
    </div>
</div>

Asterisk#

preview

<div class="pricebox">
    <div class="pricebox-wrapper">
        <div class="pricebox-container">
            <div class="pricebox-price-wrapper" aria-label="59,59 *">
                <span class="pricebox-price">59,59</span>
                <div class="pricebox-suffix">
                    <span class="pricebox-asterisk">*</span>
                </div>
            </div>
        </div>
    </div>
</div>

Currency#

preview

<div class="pricebox">
    <div class="pricebox-wrapper">
        <div class="pricebox-container">
            <div class="pricebox-price-wrapper" aria-label="59,59 CHF">
                <span class="pricebox-price">59,59</span>
                <div class="pricebox-suffix">
                    <span class="pricebox-currency">CHF</span>
                </div>
            </div>
        </div>
    </div>
</div>

Basic quantitiy#

preview

<div class="pricebox">
    <div class="pricebox-wrapper">
        <div class="pricebox-container">
            <div class="pricebox-price-wrapper" aria-label="59,59">
                <span class="pricebox-price">59,59</span>
            </div>
        </div>
    </div>
    <div class="pricebox-basic-quantity">je 240/300/320g/200ml-Tube. 100g = -,93 Fliesenkleber /
        1,25 Montagekleber</div>
</div>

Custom values#

preview

<div class="pricebox">
    <div class="pricebox-wrapper">
        <div class="pricebox-container">
            <div class="pricebox-price-wrapper" aria-label="from £ 59,59 incl. Mwst *, 1">
                <span class="pricebox-prefix">from</span>
                <span class="pricebox-price">£ 59,59</span>
                <div class="pricebox-suffix">
                    <span class="pricebox-asterisk">*, 1</span>
                    <span class="pricebox-currency">incl. Mwst</span>
                </div>
            </div>
        </div>
    </div>
    <div class="pricebox-basic-quantity">1kg = £ 5,99</div>
</div>

Pricebox in product-tile#

Such a pricebox fits perfectly into an product tile like in the following example. To align the pricebox to the right of the element, simply the attribute text-align: right can be set.

preview

<div class="row">
    <div class="col-6 col-md-3 mb-2 mb-md-0">
        <a href="#" class="card product-tile-card ">
            <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                alt="placeholder" class="card-img-top" folder="../../../_assets/images/examples"
                images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
            <div class="card-body product-tile-card-body">
                <h3 class="card-title product-tile-card-title">Product title</h3>
                <p class="card-text product-tile-card-text">Product description</p>
                <div class="text-right">
                    <div class="pricebox">
                        <div class="pricebox-wrapper">
                            <div class="pricebox-container">
                                <div class="pricebox-price-wrapper"
                                    aria-label="from 9.999,99 CHF *">
                                    <span class="pricebox-prefix">from</span>
                                    <span class="pricebox-price">9.999,99</span>
                                    <div class="pricebox-suffix">
                                        <span class="pricebox-asterisk">*</span>
                                        <span class="pricebox-currency">CHF</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pricebox-basic-quantity">88kg = -.88 CHF</div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-6 col-md-3 mb-2 mb-md-0">
        <a href="#" class="card product-tile-card ">
            <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                alt="placeholder" class="card-img-top" folder="../../../_assets/images/examples"
                images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
            <div class="card-body product-tile-card-body">
                <h3 class="card-title product-tile-card-title">Product title</h3>
                <p class="card-text product-tile-card-text">Product description</p>
                <div class="text-right">
                    <div class="pricebox">
                        <div class="pricebox-wrapper">
                            <div class="pricebox-container">
                                <div class="pricebox-price-wrapper" aria-label="145,27 *">
                                    <span class="pricebox-price">145,27</span>
                                    <div class="pricebox-suffix">
                                        <span class="pricebox-asterisk">*</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pricebox-basic-quantity">je 240/300/320g/200ml-Tube. 100g = -,93
                            Fliesenkleber / 1,25 Montagekleber</div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-6 col-md-3 mb-2 mb-md-0">
        <a href="#" class="card product-tile-card ">
            <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                alt="placeholder" class="card-img-top" folder="../../../_assets/images/examples"
                images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
            <div class="card-body product-tile-card-body">
                <h3 class="card-title product-tile-card-title">Product title</h3>
                <p class="card-text product-tile-card-text">Product description</p>
                <div class="text-right">
                    <div class="pricebox">
                        <div class="pricebox-wrapper">
                            <div class="pricebox-container">
                                <div class="pricebox-price-wrapper" aria-label="ab 145,27 €">
                                    <span class="pricebox-prefix">ab</span>
                                    <span class="pricebox-price">145,27</span>
                                    <div class="pricebox-suffix">
                                        <span class="pricebox-currency">€</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pricebox-basic-quantity">je 240/300/320g/200ml-Tube. 100g = -,93
                            Fliesenkleber / 1,25 Montagekleber</div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-6 col-md-3 mb-2 mb-md-0">
        <a href="#" class="card product-tile-card ">
            <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                alt="placeholder" class="card-img-top" folder="../../../_assets/images/examples"
                images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
            <div class="card-body product-tile-card-body">
                <h3 class="card-title product-tile-card-title">Product title</h3>
                <p class="card-text product-tile-card-text">Product description</p>
                <div class="text-right">
                    <div class="pricebox">
                        <div class="pricebox-wrapper">
                            <div class="pricebox-container">
                                <div class="pricebox-price-wrapper" aria-label="$59.59">
                                    <span class="pricebox-price">$59.59</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

Of course the pricebox has a modular structure which gives you the possibility to remove or add any element with any combination possible.

Highlight pricebox#

To highlight promotions or discounts, you can place a element with the class .pricebox-highlight before the .pricebox-price-wrapper as an child of the .pricebox-wrapper.

You can choose different colors by adding one of the following classes to the root element .pricebox. To get the correct style, you need at least one of them:

  • action (.pricebox-with-highlight-action)
  • offer (.pricebox-with-highlight-offer)

Theme action#

preview

<div class="pricebox pricebox-with-highlight-action">
    <div class="pricebox-wrapper">
        <div class="pricebox-highlight">Action</div>
        <div class="pricebox-container">
            <div class="pricebox-price-wrapper" aria-label="ab 9.999,99 €">
                <span class="pricebox-prefix">ab</span>
                <span class="pricebox-price">9.999,99</span>
                <div class="pricebox-suffix">
                    <span class="pricebox-currency">€</span>
                </div>
            </div>
        </div>
    </div>
    <div class="pricebox-basic-quantity">1kg = 1.10 €</div>
</div>

Theme offer#

preview

<div class="pricebox pricebox-with-highlight-offer">
    <div class="pricebox-wrapper">
        <div class="pricebox-highlight">Offer</div>
        <div class="pricebox-container">
            <div class="pricebox-price-wrapper" aria-label="ab 9.999,99 €">
                <span class="pricebox-prefix">ab</span>
                <span class="pricebox-price">9.999,99</span>
                <div class="pricebox-suffix">
                    <span class="pricebox-currency">€</span>
                </div>
            </div>
        </div>
    </div>
    <div class="pricebox-basic-quantity">1kg = 1.10 €</div>
</div>

Discount#

The discount informations are seperatet in two elements:

  • the info text (.pricebox-discount)
  • the old price, which is shown as strikethrough (.pricebox-recommended-retail-price)

They are seperated by at least one space. Both are wrapped by .pricebox-discount-wrapper, which is part of .pricebox-container.

Please note, that we add an element with the class sr-only (screen reader only) to the .pricebox-recommended-retail-price element. Use this to clarify the RRP to screen reader users (The strikethrough is not mentioned by screen readers.).

preview

<div class="pricebox">
    <div class="pricebox-wrapper">
        <div class="pricebox-container">
            <div class="pricebox-discount-wrapper">
                <span class="pricebox-discount">UVP:</span><span
                    class="pricebox-recommended-retail-price">
                    <span class="sr-only">old price</span>10.90</span>
            </div>
            <div class="pricebox-price-wrapper" aria-label="from 9.999,99 CHF *">
                <span class="pricebox-prefix">from</span>
                <span class="pricebox-price">9.999,99</span>
                <div class="pricebox-suffix">
                    <span class="pricebox-asterisk">*</span>
                    <span class="pricebox-currency">CHF</span>
                </div>
            </div>
        </div>
    </div>
</div>

Negative#

You are able to negate the colors of the pricefield to generate more attation by adding the class .pricebox-negative to the .pricebox element.

preview

<div class="pricebox pricebox-negative">
    <div class="pricebox-wrapper">
        <div class="pricebox-container">
            <div class="pricebox-discount-wrapper">
                <span class="pricebox-discount">UVP:</span><span
                    class="pricebox-recommended-retail-price">
                    <span class="sr-only">old price</span>9.999,99</span>
            </div>
            <div class="pricebox-price-wrapper" aria-label="from 9.998,50 CHF *">
                <span class="pricebox-prefix">from</span>
                <span class="pricebox-price">9.998,50</span>
                <div class="pricebox-suffix">
                    <span class="pricebox-asterisk">*</span>
                    <span class="pricebox-currency">CHF</span>
                </div>
            </div>
        </div>
    </div>
</div>

Sizes#

There are different sizes of the standard pricebox.

  • The small variant above is mostly used on the product tile.
  • The medium variant on product detail page.

To get the medium variant simply add .pricebox-medium to the .pricebox element.

preview

<div class="pricebox pricebox-medium">
    <div class="pricebox-wrapper">
        <div class="pricebox-container">
            <div class="pricebox-price-wrapper" aria-label="from 9.999,99 CHF *">
                <span class="pricebox-prefix">from</span>
                <span class="pricebox-price">9.999,99</span>
                <div class="pricebox-suffix">
                    <span class="pricebox-asterisk">*</span>
                    <span class="pricebox-currency">CHF</span>
                </div>
            </div>
        </div>
    </div>
    <div class="pricebox-basic-quantity">88kg = -.88 CHF</div>
</div>

All together#

preview

<div class="pricebox pricebox-negative pricebox-medium pricebox-with-highlight-offer">
    <div class="pricebox-wrapper">
        <div class="pricebox-highlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit
        </div>
        <div class="pricebox-container">
            <div class="pricebox-discount-wrapper">
                <span class="pricebox-discount">UVP:</span><span
                    class="pricebox-recommended-retail-price">
                    <span class="sr-only">original price</span>9.999,99</span>
            </div>
            <div class="pricebox-price-wrapper" aria-label="from 9.998,50 CHF *">
                <span class="pricebox-prefix">from</span>
                <span class="pricebox-price">9.998,50</span>
                <div class="pricebox-suffix">
                    <span class="pricebox-asterisk">*</span>
                    <span class="pricebox-currency">CHF</span>
                </div>
            </div>
        </div>
    </div>
    <div class="pricebox-basic-quantity">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

Change log#

6.2.0 - 2021-08-19#

Changed#

  • SCSS: "Pricebox" | changed .pricebox-highlight font-weight to 800

6.0.1 - 2021-06-24#

Changed#

  • SCSS: "Pricebox" | Update pricebox stylings to bring the appearance more in line with the print definitions
    • Update text color of the component
    • Update label and basic quantity font size
    • Update margins of price container (.pricebox-container)

6.0.0 - 2021-04-19#

Removed#

  • SCSS, Doc, HTML: "Pricebox" | removed pricebox theme .pricebox-with-highlight-info completely

5.0.0 - 2021-01-28#

Fixed#

  • SCSS: "Pricebox" | fixed padding to exclude the border size

4.2.0 - 2020-08-27#

Changed#

  • Doc: "Pricebox" | Moved Lidl Plus pricebox variant to "Lidl Plus" category

4.1.0 - 2020-07-30#

Added#

  • CSS, Doc: "Pricebox" | Add new Lidl Plus pricebox variant (.pricebox-lidl-plus) for usage in Lidl Plus projects

3.3.0 - 2019-06-26#

Fixed#

  • CSS: "price-box"
    • Padding top of pricebox "highlight" from 0.375rem (6px) to 0.25rem (4px) from breakpoint SM and higher
    • Padding bottom of pricebox "highlight" from 0.875rem (14px) to 0.75rem (12px) from breakpoint SM and higher