Logos & Wordmarks

Overview

These component uses an image replacement technique for better SEO. You can, of course, still use a regular img element to insert a logo if it fits your use case better. Don't forget the alt text.

Logos

  1. Add the CSS files to your bundle. You will need the files for both the logo component and for the particular product logo you want to display.
  2. Add the component class mzp-c-logo the size class (eg: mzp-t-logo-md) and the product class (eg: mzp-t-product-firefox) to your markup.
<div class="mzp-c-logo mzp-t-logo-md mzp-t-product-firefox">
  Firefox Browser
</div>

Tips

  • Logos need both a size and product theme to display.
  • Size classes are:
    • mzp-t-logo-xs
    • mzp-t-logo-sm
    • mzp-t-logo-md
    • mzp-t-logo-lg
    • mzp-t-logo-xl
  • Product classes are:
    • mzp-t-product-family
    • mzp-t-product-firefox
    • mzp-t-product-beta
    • mzp-t-product-developer
    • mzp-t-product-nightly
    • mzp-t-product-focus
    • mzp-t-product-lockwise
    • mzp-t-product-monitor
    • mzp-t-product-mozilla
    • mzp-t-product-vpn
    • mzp-t-product-pocket
    • mzp-t-product-relay

Wordmarks

Wordmarks work a lot like the logos except they change when nested under a .mzp-t-dark class.

  1. Add the CSS files to your bundle. You will need the files for both the wordmark component and for the particular product wordmark you want to display.
  2. Add the component class mzp-c-wordmark the size class (eg: mzp-t-wordmark-md) and the product class (eg: mzp-t-product-firefox) to your markup.
Firefox Browser 
<div
 class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-firefox">
  Firefox Browser
</div>

Tips

  • Wordmarks need both a size and product theme to display.
  • Size classes are:
    • mzp-t-wordmark-xs
    • mzp-t-wordmark-sm
    • mzp-t-wordmark-md
    • mzp-t-wordmark-lg
    • mzp-t-wordmark-xl
  • Product classes are:
    • mzp-t-product-family
    • mzp-t-product-firefox
    • mzp-t-product-beta
    • mzp-t-product-developer
    • mzp-t-product-nightly
    • mzp-t-product-focus
    • mzp-t-product-lockwise
    • mzp-t-product-monitor
    • mzp-t-product-mozilla
    • mzp-t-product-vpn
    • mzp-t-product-pocket
    • mzp-t-product-relay