Mozilla Protocol
  • 22.0.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-heading">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>