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 both the file for logo and for the product logo you want.
  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
    • For vertical spacing put the logo classes on or inside a heading or paragraph.
<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.

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 both the file for wordmark and for the product wordmark you want.
  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
    • For vertical spacing put the wordmark classes on or inside a heading or paragraph.
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.