A Wordmark component displays a wordmark image (logo with text) in a range of
sizes, with a standard bottom margin. It’s similar to the Logo component but
also inverts the color of the wordmark text when it appears in a container with
This component requires two SCSS files: one for the component itself and one for the particular product to display (to avoid loading unused styles for all the different products). You’ll need to include both in your compiled Sass/SCSS to display a wordmark.
Add the component class
mzp-c-wordmark, the size class (eg:
and the product class (eg:
mzp-t-product-firefox) to your markup. All three
are necessary to display a logo.
Wordmarks are aligned with text by default (either left or right, depending on text direction). Some additional layout classes are available to center the wordmark on all viewports or only in small viewports.
This component uses CSS image replacement to display a background image in place of the element’s text content. If you use the wordmark as meaningful content like a title or heading, include the product name as accessible text. Leave the element empty if the wordmark is strictly decorative.
<div class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-firefox">Firefox Browser</div>