name: trapeze
title: Trapeze
notes: >
  The trapeze can be used to make a fancy hover effect. Two variants exist,
  depending on your needs.


  1. Use a `<span>` element to generate the wrapper.

  2. Use a single class with pseudo-elements
variants:
  - name: horizontal
    title: Horizontal
  - name: pseudo
    title: Pseudo
    notes: |
      Simply add the class `.link-trapeze-horizontal` or `.link-trapeze-vertical` to your link to add a pseudo element trapeze on hover.