Ribbon

Ribbons can be used to add unique selling prepositions or other informations. The ribbons can be used inside teasers or images.

Ribbon colors#

preview

<ul class="ribbon ">
    <li class="ribbon-item ribbon-item-primary">Primary</li>
    <li class="ribbon-item ribbon-item-info">Info</li>
    <li class="ribbon-item ribbon-item-danger">Highlight</li>
    <li class="ribbon-item ribbon-item-gray">Gray</li>
</ul>

There are several theme colors for the ribbons. As default the ribbon should have the .ribbon-item-primary class applied to it. For informations that should be highlighted more offensively you can use .ribbon-item-danger (In this case the danger color is used for highlighting not for errors!). Additionally you can use the styling .ribbon-item-gray for your ribbons.

Apart from the variants shown above, the ribbons are available in any theme color. Therefore the classes .ribbon-item-success and .ribbon-item-warning can be used as well, which are not CI conform.

Multiple ribbons#

preview

<ul class="ribbon ">
    <li class="ribbon-item ribbon-item-primary">First #1</li>
    <li class="ribbon-item ribbon-item-primary">Second #2</li>
    <li class="ribbon-item ribbon-item-primary">Thrid #3</li>
    <li class="ribbon-item ribbon-item-danger">Fourth #4</li>
</ul>

If there is a need to highlight more pieces of informations, you can add multiple ribbons items inside one ribbon. As a recommandation you should not use more than two ribbon items inside one ribbon. Also the ribbon should not exceed the 50% of the parents width. Nevertheless you can change this value in the variables.scss with the configuration variable $ribbon-max-width: 50%.

Ribbons with image#

preview

<ul class="ribbon ">
    <li class="ribbon-item ribbon-item-primary">
        <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
            alt="A beautiful cake image *_*" class="img-fluid"
            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"
            width="80px" height="60px" title="placeholder" />
    </li>
    <li class="ribbon-item ribbon-item-primary">
        <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
            alt="A beautiful cake image *_*" class="img-fluid"
            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"
            title="placeholder" width="160px" height="120px" />
    </li>
</ul>

As an alternative you can also use images inside a ribbon. When using images make sure to add the class .img-fluid to the image element to prevent the image from exceeding the parents width. This class will add max-width: 100% and height: auto to the image element.

Ribbon example on teaser#

preview

<div class="row">
    <div class="col col-12 col-sm-6 p-1">
        <article class="card teaser-card teaser-card-light">
            <a href="#" class="teaser-card-link">
                <ul class="ribbon ">
                    <li class="ribbon-item ribbon-item-primary">First #1</li>
                    <li class="ribbon-item ribbon-item-primary">Second #2</li>
                    <li class="ribbon-item ribbon-item-primary">Thrid #3</li>
                    <li class="ribbon-item ribbon-item-danger">Fourth #4</li>
                </ul>
                <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>

This is an example how the ribbon is used on a teaser. It overlap the component on the right side.

Wrapper element position#

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

Change log#

6.5.0 - 2022-02-21#

Removed#

  • DOC: "Ribbon" | Removed mentions and example of product tile in the documentation

4.2.0 - 2020-08-27#

Fixed#

  • HTML: "Ribbon" | removed wrapper .cake-example-ribbon div from some code examples

3.11.0 - 2020-04-09#

Changed#

  • DOC: "Ribbon" | Add note that wrapper element should have position: relative

3.9.0 - 2020-01-16#

Changed#

  • SCSS: "Ribbon" | Use position: absolute instead of relative in .ribbon class to allow useful positioning (eg. in the product tile)
  • SCSS: "Ribbon" | Add left: 0 to .ribbon styling to span it over the complete width of it's parent
  • DOC: "Ribbon" | The headings "Multiple ribbons and "Ribbon colors" have been exchanged.
  • DOC: "Ribbon" | Add example ribbon on product tile and teaser component.

3.8.0 - 2019-11-07#

Changed#

  • SCSS: "Ribbon" | Use mixins for border radius