Teaser

The teaser consists of an image, a title and a subheadline.

To create an teaser you have to apply the classes .card and .teaser-card to any element or like in our examples to an <article> element, to semantically describe a self-contained composition (MDN: The Article Contents element).

The teaser component depends on the Card component and uses .card, .card-img and .card-img-overlay. So you have to include the Card component Sass to use the teaser component.

Teaser components#

Only the image is obligatory which means all the other parts of a teaser can optionally be added or removed. The image can be any image with preferably a 4:3 ratio. To apply the correct styling to the image use the .card-img class. In order to keep the ratio 4:3 on any image size surround the image and teaser-body with any wrapper element and the classes .teaser-image-ratioand .ratio-4-3 attatched to it.

preview

<article class="card teaser-card ">
    <div class="teaser-image-ratio ratio-4-3">
        <img is="rnd-img"
            src="../../../_assets/images/examples/Backen_Weihnachten_CloseUp_v02_USAR.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" />
        <div class="card-body">
            <header class="teaser-header">
                <h2 class="teaser-card-title">Title</h2>
                <h3 class="teaser-card-subhead">Subhead</h3>
            </header>
        </div>
    </div>
</article>

Teaser bar#

The content of the subheadline and title should be kept as short as possible.

To put content onto this teaser, you have to use an element with the class .card-body inside the wrapper element. In addition you have to add another header element with the class .teaser-header. Inside this element you can place your .teaser-card-title and .teaser-card-subhead.

The bar of the teaser can be created with any element like the <header> element with .card-img-overlay and .teaser-card-img-overlay. Inside this wrapper element you can put the title .teaser-card-title and / or subheadline .teaser-card-subhead of the teaser.

preview

<article class="card teaser-card ">
    <div class="teaser-image-ratio ratio-4-3">
        <img is="rnd-img"
            src="../../../_assets/images/examples/Backen_Weihnachten_CloseUp_v02_USAR.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" />
        <div class="card-body">
            <header class="teaser-header">
                <h2 class="teaser-card-title">Title</h2>
            </header>
        </div>
    </div>
</article>

Linked teaser#

If you'd like a linked teaser, you can simply use an a-tag as wrapper element for your teaser content like in the example above. Additionally you have to also apply the class .teaser-card-link to this a-tag.

preview

<article class="card teaser-card ">
    <a href="#" class="teaser-image-ratio ratio-4-3 teaser-card-link">
        <img is="rnd-img"
            src="../../../_assets/images/examples/Backen_Weihnachten_CloseUp_v02_USAR.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" />
        <div class="card-body">
            <header class="teaser-header">
                <h2 class="teaser-card-title">Title</h2>
                <h3 class="teaser-card-subhead">Subhead</h3>
            </header>
        </div>
    </a>
</article>

Teaser inside a grid#

To get started easily below is an example of how to use the teasers with our grid. This example can be changed to whatever you need in your project.

3 cols#

preview

<div class="container">
    <div class="row">
        <div class="col col-12 col-sm-6 col-md-4 p-1">
            <article class="card teaser-card ">
                <a href="#" class="teaser-image-ratio ratio-4-3 teaser-card-link">
                    <img is="rnd-img"
                        src="../../../_assets/images/examples/Backen_Weihnachten_CloseUp_v02_USAR.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" />
                    <div class="card-body">
                        <header class="teaser-header">
                            <h2 class="teaser-card-title">Title</h2>
                            <h3 class="teaser-card-subhead">Subhead</h3>
                        </header>
                    </div>
                </a>
            </article>
        </div>
        <div class="col col-12 col-sm-6 col-md-4 p-1">
            <article class="card teaser-card ">
                <a href="#" class="teaser-image-ratio ratio-4-3 teaser-card-link">
                    <img is="rnd-img"
                        src="../../../_assets/images/examples/Backen_Weihnachten_CloseUp_v02_USAR.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" />
                    <div class="card-body">
                        <header class="teaser-header">
                            <h2 class="teaser-card-title">Title</h2>
                            <h3 class="teaser-card-subhead">Subhead</h3>
                        </header>
                    </div>
                </a>
            </article>
        </div>
        <div class="col col-12 col-sm-6 col-md-4 p-1">
            <article class="card teaser-card ">
                <a href="#" class="teaser-image-ratio ratio-4-3 teaser-card-link">
                    <img is="rnd-img"
                        src="../../../_assets/images/examples/Backen_Weihnachten_CloseUp_v02_USAR.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" />
                    <div class="card-body">
                        <header class="teaser-header">
                            <h2 class="teaser-card-title">Title</h2>
                            <h3 class="teaser-card-subhead">Subhead</h3>
                        </header>
                    </div>
                </a>
            </article>
        </div>
    </div>
</div>

4 cols#

preview

<div class="container">
    <div class="row">
        <div class="col col-12 col-sm-6 col-md-3 p-1">
            <article class="card teaser-card ">
                <a href="#" class="teaser-image-ratio ratio-4-3 teaser-card-link">
                    <img is="rnd-img"
                        src="../../../_assets/images/examples/Backen_Weihnachten_CloseUp_v02_USAR.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" />
                    <div class="card-body">
                        <header class="teaser-header">
                            <h2 class="teaser-card-title">Title</h2>
                            <h3 class="teaser-card-subhead">Subhead</h3>
                        </header>
                    </div>
                </a>
            </article>
        </div>
        <div class="col col-12 col-sm-6 col-md-3 p-1">
            <article class="card teaser-card ">
                <a href="#" class="teaser-image-ratio ratio-4-3 teaser-card-link">
                    <img is="rnd-img"
                        src="../../../_assets/images/examples/Backen_Weihnachten_CloseUp_v02_USAR.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" />
                    <div class="card-body">
                        <header class="teaser-header">
                            <h2 class="teaser-card-title">Title</h2>
                            <h3 class="teaser-card-subhead">Subhead</h3>
                        </header>
                    </div>
                </a>
            </article>
        </div>
        <div class="col col-12 col-sm-6 col-md-3 p-1">
            <article class="card teaser-card ">
                <a href="#" class="teaser-image-ratio ratio-4-3 teaser-card-link">
                    <img is="rnd-img"
                        src="../../../_assets/images/examples/Backen_Weihnachten_CloseUp_v02_USAR.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" />
                    <div class="card-body">
                        <header class="teaser-header">
                            <h2 class="teaser-card-title">Title</h2>
                            <h3 class="teaser-card-subhead">Subhead</h3>
                        </header>
                    </div>
                </a>
            </article>
        </div>
        <div class="col col-12 col-sm-6 col-md-3 p-1">
            <article class="card teaser-card ">
                <a href="#" class="teaser-image-ratio ratio-4-3 teaser-card-link">
                    <img is="rnd-img"
                        src="../../../_assets/images/examples/Backen_Weihnachten_CloseUp_v02_USAR.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" />
                    <div class="card-body">
                        <header class="teaser-header">
                            <h2 class="teaser-card-title">Title</h2>
                            <h3 class="teaser-card-subhead">Subhead</h3>
                        </header>
                    </div>
                </a>
            </article>
        </div>
    </div>
</div>