Zap

Zap

The zap is a florish that can be added to Firefox themed sites to give emphasis to one word.

Here is a zap one example.

Here is a zap three example.

Here is a zap twelve example.

<h1 class="mzp-has-zap-1">Here is a zap <strong>one</strong> example.</h1>

<h2 class="mzp-has-zap-3">Here is a zap <strong>three</strong> example.</h2>

<h3 class="mzp-has-zap-12">Here is a zap <strong>twelve</strong> example.</h3>

Notes

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

Add the class mzp-has-zap-1, and change the number 1 to the number of the zap you want. There are 18 zaps 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') mixin.

Tips

  • zaps cannot break to a new line, so they should only be put on one word
  • the zap is flexible! it can be used on words of various sizes
  • zaps will work best on large text
  • zaps with a lot of detail don't work as well on short words