vcl-ribbon

A ribbon to show meta data in a celebratory manner.

Usage no npm install needed!

<script type="module">
  import vclRibbon from 'https://cdn.skypack.dev/vcl-ribbon';
</script>

README

VCL ribbon

A ribbon to show meta data in a celebratory manner.

Features

The corner-ribbon can be placed in the corners of a parent container or the viewport.

Usage

The container uses the class vclOverflowHidden to cut the ribbon.

positions example

A ribbon can also be a link and contain an icogram.

link and icogram example

Classes

  • vclCornerRibbon

Modifiers

  • vclSticky: stick to the viewport.
  • vclShadow: show a shadow.
  • vclTopLeft
  • vclTopRight
  • vclBottomLeft
  • vclBottomRight

Variables

  • --ribbon-bg-color
  • --ribbon-color
  • --ribbon-shadow-color

Demo

example.html on GH-pages.