Flap

It might make sense to use the .hyphens utility to change the text behaviour on line breaks. This can be optionally added to the .flap, .flap-content or .flap-text class position.

Examples#

preview

<div class="flap">
    <div class="flap-content bg-mark">
        <div class="flap-nose">
        </div>
        <div class="flap-text">Lidl Plus Coupon</div>
    </div>
</div>

To get an specific thin style, make use of <br> in the content of the .flap-text element.

preview

<div class="row">
    <div class="col col-12 col-sm-6 p-1">
        <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" />
            <div class="flap">
                <div class="flap-content bg-mark">
                    <div class="flap-nose">
                    </div>
                    <div class="flap-text">Lidl Plus Coupon</div>
                </div>
            </div>
            <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>
        </a>
    </div>
    <div class="col col-12 col-sm-6 p-1">
        <article class="card teaser-card teaser-card-light">
            <a href="#" class="teaser-card-link">
                <div class="flap">
                    <div class="flap-content bg-mark">
                        <div class="flap-nose">
                        </div>
                        <div class="flap-text">Lidl Plus<br />Coupon</div>
                    </div>
                </div>
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="A beautiful cake image *_*" class="card-img"
                    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" />
                <header class="card-img-overlay teaser-card-img-overlay">
                    <h2 class="teaser-card-title">Title</h2>
                    <h3 class="teaser-card-subhead">Subhead</h3>
                </header>
            </a>
        </article>
    </div>
</div>

Wrapper element position#

Please be aware, that the flap is absolute positioned and therefore the wrapper element should have position: relative applied to it! Otherwise the flap element will be positioned to the next outer element with relative position which will be the body element in worst case.