vcl-badge

A visually highlighted tag to attribute items or show counts.

Usage no npm install needed!

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

README

VCL badge

A visually highlighted tag to attribute items or show counts.

Features

A tag with rounded corners. Supports semantic modifiers for coloring.

Usage

basic example

Classes

  • vclBadge

Modifiers

Semantic coloring.

  • vclPrimary
  • vclSuccess
  • vclInfo
  • vclWarning
  • vclError

Variables

  • --badge-default-color
  • --badge-default-bg-color
  • --badge-primary-color
  • --badge-primary-bg-color
  • --badge-success-color
  • --badge-success-bg-color
  • --badge-info-color
  • --badge-info-bg-color
  • --badge-warning-color
  • --badge-warning-bg-color
  • --badge-danger-color
  • --badge-danger-bg-color

Demo

example.html on GH-pages.