↓Skip to main content
  1. Snippits & Exemplars/
  2. WolfspyreLabs Exemplars/
  3. WolfspyreLabs Shortcodes/

Divider

I found this shortcode1 on making a fancypants divider. I’ve implemented it in our rig as the divider shortcode:

{{<divider >}}

Should work as expected:

🐾

You can’t leave good enough alone, Can you Wolf? #

So, of course, I arted it up a bit.

I added a handful of parameters that can be fed to the shortcode to enhance it’s awesomeness.

Full parameter list #

Examples

{{< divider >}}

🐾

{{< divider glyph="❤️” >}}

❤️

{{< divider glyph="❤️" spanHeight=“30” >}}

❤️

{{< divider glyph="❤️" gradientDirection=“bottom” spanHeight=“50” >}}

❤️

{{< divider glyph="❤️" gradientDirection=“top right” spanColor="#055,transparent,#0A0,transparent,#550" spanHeight=“50” >}}

❤️

{{< divider glyph="❤️" gradientDirection=“top right” spanFadeIn=“20%” spanColor="#055,transparent,#0a0,transparent,#550,transparent,#055,transparent,#0a0,transparent,#550" spanHeight=“50” >}}

❤️

{{< divider glyph="❤️" gradientDirection=“top right” spanFadeIn=“20%” spanFadeOut=“80%” spanColor="#055,transparent,#0a0,transparent,#550,transparent,#055,transparent,#0a0,transparent,#550,transparent" spanHeight=“50” >}}

❤️

This is managed by the file layouts/shortcodes/divider.html

  1. https://livebook.manning.com/book/hugo-in-action/chapter-4/213 ↩︎

  2. https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient ↩︎