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.