Pricebox

As an addition to the default pricebox there is a special variant for usage in the lidl plus context.

Highlight pricebox#

There is an additional color for Lidl Plus you can choose by adding the following class to the root element .pricebox:

  • lidl-plus (.pricebox-lidl-plus)

Discount#

preview

<div class="pricebox pricebox-lidl-plus">
    <div class="pricebox-wrapper">
        <div class="pricebox-highlight">-XX%</div>
        <div class="pricebox-container">
            <div class="pricebox-discount-wrapper"><span class="pricebox-recommended-retail-price">
                    <span class="sr-only">old price</span>X.XX*</span>
            </div>
            <div class="pricebox-price-wrapper" aria-label="-.XX EUR **">
                <span class="pricebox-price">-.XX</span>
                <div class="pricebox-suffix">
                    <span class="pricebox-asterisk">**</span>
                    <span class="pricebox-currency">EUR</span>
                </div>
            </div>
        </div>
    </div>
</div>

Discount with basic quantity#

preview

<div class="pricebox pricebox-lidl-plus">
    <div class="pricebox-wrapper">
        <div class="pricebox-highlight">Mit Coupon: -XX%</div>
        <div class="pricebox-container">
            <div class="pricebox-discount-wrapper"><span class="pricebox-recommended-retail-price">
                    <span class="sr-only">old price</span>XX.XX*</span>
            </div>
            <div class="pricebox-price-wrapper" aria-label="XX.XX EUR **">
                <span class="pricebox-price">XX.XX</span>
                <div class="pricebox-suffix">
                    <span class="pricebox-asterisk">**</span>
                    <span class="pricebox-currency">EUR</span>
                </div>
            </div>
        </div>
    </div>
    <div class="pricebox-basic-quantity">je X,XXl, 1l = XX.XX €</div>
</div>

Possible combinations#

preview

<a href="#" class="card product-tile-card " style="max-width:18rem">
    <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" />
    <ul class="ribbon ">
        <li class="ribbon-item ribbon-item-lidl-plus">
            <img src="../../.././_assets/images/logo_lidl-plus.svg" alt="Lidl Plus Logo" />
        </li>
    </ul>
    <div class="card-body product-tile-card-body">
        <h3 class="card-title product-tile-card-title">Cake</h3>
        <p class="card-text product-tile-card-text">Very delicious and sweet piece of love.</p>
        <div class="text-right">
            <div class="pricebox pricebox-lidl-plus">
                <div class="pricebox-wrapper">
                    <div class="pricebox-highlight">Mit Coupon: -XX%</div>
                    <div class="pricebox-container">
                        <div class="pricebox-discount-wrapper"><span
                                class="pricebox-recommended-retail-price">
                                <span class="sr-only">old price</span>XX.XX*</span>
                        </div>
                        <div class="pricebox-price-wrapper" aria-label="XX.XX EUR **">
                            <span class="pricebox-price">XX.XX</span>
                            <div class="pricebox-suffix">
                                <span class="pricebox-asterisk">**</span>
                                <span class="pricebox-currency">EUR</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pricebox-basic-quantity">je X,XXl, 1l = XX.XX €</div>
            </div>
        </div>
    </div>
</a>

Change log#

6.12.0+doc.2 - 2024-06-27#

Deprecated#

  • Doc: "Lidl Plus Pricebox" | This component is deprecated and will not supported anymore.