Mozilla Protocol
  • 19.1.0

Zap: All Styles

The zap is a colorful flourish that can be added to Firefox themed sites to give emphasis to one word, usually in a headline.

For localization purposes the theme class for the zap goes on the parent element and the zap image is applied to any child <strong> tags.

Add the class mzp-has-zap-1, where the number 1 is the number of the zap you want. There are 18 styles to choose from.

If you want to apply the zap in a different manner, or use a zap that’s not one of the default ones you can use the zap('zap.svg') Sass mixin.

Tips

  • Zaps cannot break to a new line so they should only appear on one word. Trying to span a zap across more than one word will cause problems if text wraps.
  • The zap is flexible! It can be used on words of various lengths and fonts of different sizes.
  • Zaps will work best on large text.
  • Zaps with a lot of detail don’t work as well on short words (they will appear scrunched).
<h2 class="mzp-has-zap-1">An <strong>example</strong> of Zap 1</h2>

<h2 class="mzp-has-zap-2">An <strong>example</strong> of Zap 2</h2>

<h2 class="mzp-has-zap-3">An <strong>example</strong> of Zap 3</h2>

<h2 class="mzp-has-zap-4">An <strong>example</strong> of Zap 4</h2>

<h2 class="mzp-has-zap-5">An <strong>example</strong> of Zap 5</h2>

<h2 class="mzp-has-zap-6">An <strong>example</strong> of Zap 6</h2>

<h2 class="mzp-has-zap-7">An <strong>example</strong> of Zap 7</h2>

<h2 class="mzp-has-zap-8">An <strong>example</strong> of Zap 8</h2>

<h2 class="mzp-has-zap-9">An <strong>example</strong> of Zap 9</h2>

<h2 class="mzp-has-zap-10">An <strong>example</strong> of Zap 10</h2>

<h2 class="mzp-has-zap-11">An <strong>example</strong> of Zap 11</h2>

<h2 class="mzp-has-zap-12">An <strong>example</strong> of Zap 12</h2>

<h2 class="mzp-has-zap-13">An <strong>example</strong> of Zap 13</h2>

<h2 class="mzp-has-zap-14">An <strong>example</strong> of Zap 14</h2>

<h2 class="mzp-has-zap-15">An <strong>example</strong> of Zap 15</h2>

<h2 class="mzp-has-zap-16">An <strong>example</strong> of Zap 16</h2>

<h2 class="mzp-has-zap-17">An <strong>example</strong> of Zap 17</h2>

<h2 class="mzp-has-zap-18">An <strong>example</strong> of Zap 18</h2>