Mozilla Protocol
  • 19.1.0

Sticky Promo: Dark Theme

A dark theme can be a good contrast on a light-themed page. This example also features a product logo and button.

<aside class="mzp-c-sticky-promo mzp-t-dark mzp-t-product-developer">
    <button class="mzp-c-sticky-promo-close" type="button">Close</button>
    <h3 class="mzp-c-sticky-promo-title">Get the browser made for developers</h3>
    <p><a href="#" class="mzp-c-button mzp-t-product mzp-t-lg">Download Now</a></p>
</aside>

<button id="showSticky" class="mzp-c-button" type="button">Show Sticky Promo</button>

<script src="../../protocol/js/sticky-promo.js"></script>

<script>
    (function() {
        'use strict';
        var showStickyBtn = document.getElementById("showSticky");
        showStickyBtn.addEventListener('click', MzpStickyPromo.open, false);
    })();
</script>