Flash - Frame

FlashFramePreview

To build a frame element add the .flash-frame class to an element. Wrapp it around an element with the class .flash-frame-content for the content.

Colors#

The default positive variant is with the primary color as background. To use the negative variant simply add the class .flash-frame-negative.

Content#

The frame grows with the content up to a max-width of 50% of the parent element. If the text don't fit, it will be cut off with the ellipsis (…). The content is one line most of the time, but if you want two lines: please use <br /> as an line divider. The third line is not visible anymore.

preview<html>

<div class="flash-frame">
    <div class="flash-frame-content">first line<br />second line</div>
</div>

FlashFrameContent

Positioning#

The frame should be placed at the left or right border of an component. The vertical setting is freely selectable. The component is free of positioning properties, but we added a little help for you. You can add the .left or .right class for the proper placement. Not that you need to add the .right class for the switched visualisation of the component. Next to this we added left: 0 and right: 0 to the corresponding classes. .left and .right can be extended for the specific viewports, so you can add -sm, -ms and -lg to these classes.

preview<html>

<div style="height:15rem;position:relative">
    <div class="flash-frame right" style="position:absolute;top:0">
        <div class="flash-frame-content">.right</div>
    </div>
    <br />
    <br />
    <div class="flash-frame left right-lg" style="position:absolute;top:5rem">
        <div class="flash-frame-content">.left.right-lg</div>
    </div>
    <br />
    <br />
    <div class="flash-frame right left-md" style="position:absolute;top:10rem">
        <div class="flash-frame-content">.right.left-md</div>
    </div>
</div>

FlashFramePositioning

Example#

For example a frame on a teaser.

preview<html>

<article class="card teaser-card " style="position:relative">
    <div class="teaser-image-ratio ratio-4-3">
        <div class="flash-frame left" style="position:absolute;top:1rem;z-index:1">
            <div class="flash-frame-content">frame</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 frame</h3>
            </header>
        </div>
    </div>
</article>

FlashFrameExample