Flash - Bubble

FlashBubblePreview

To build a marker element add the .flash-bubble class to an element. Wrapp it around an element with the class .flash-bubble-content which contains the content.

Colors#

The default variant is the positive one with the primary color as background. To use the negative variant add the class .flash-bubble-negative to the wrapper element.

Content#

The element has a fixed width and height, so the element cannot grow. Therefore, with larger content the text becomes multiline up to a maximum number of 2 lines or 3 lines on breakpoint LG. If the space is not enough, the rest of the content is dotted out.

preview<html>

<div class="flash-bubble">
    <div class="flash-bubble-content">in this example we've put some more content to the flash
        bubble to show the behavior for such long texts that we do not recommend at all!</div>
</div>

FlashBubbleContent

Positioning#

The bubble can be freely positioned. The component itself is free of positioning properties. Therefore you have to add positioning porperties on your own either with style properties or with a self styled class or id. Please test it on any device size and try to stick to the mobile first approach.

preview<html>

<div style="height:15rem;position:relative">
    <div class="flash-bubble" style="position:absolute;top:5rem;left:5rem">
        <div class="flash-bubble-content">example positioning</div>
    </div>
</div>

FlashBubblePositioning

Example#

The flash bubble positioned on a teaser for example purpose.

preview<html>

<article class="card teaser-card " style="position:relative">
    <div class="teaser-image-ratio ratio-4-3">
        <div class="flash-bubble left" style="position:absolute;top:10%;left:10%;z-index:1">
            <div class="flash-bubble-content">bubble on teaser</div>
        </div>
        <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">Teaser</h2>
                <h3 class="teaser-card-subhead">with flash bubble</h3>
            </header>
        </div>
    </div>
</article>

FlashBubbleExample