Badge

A word beside a title: live, new, a state. Five tones.

  • kit.badge()
  • 257 B of CSS · 6 rules
  • kit.css
  • No script needed
livenewpaidexpiringfailed

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.badge('live', 'live')
    + kit.badge('new', 'accent')
    + kit.badge('paid', 'ok')
    + kit.badge('expiring', 'warn')
    + kit.badge('failed', 'bad');

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<script src="https://openvibe.network/shared/kit.js"></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.badge('live', 'live')
      + OpenVibeKit.badge('new', 'accent')
      + OpenVibeKit.badge('paid', 'ok')
      + OpenVibeKit.badge('expiring', 'warn')
      + OpenVibeKit.badge('failed', 'bad');
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 259 B
<span class="ovk-badge ovk-badge--live">live</span><span class="ovk-badge ovk-badge--accent">new</span><span class="ovk-badge ovk-badge--ok">paid</span><span class="ovk-badge ovk-badge--warn">expiring</span><span class="ovk-badge ovk-badge--bad">failed</span>

What it weighs

Its own rules are 808 B, 257 B as sent: 1% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.