Labels

What a stream, recording, picture or post carries (nudity, strong language, graphic, 18+, flashing lights, spoilers), in words. Only the labels in force: a suggestion is the creator's to confirm. The page marks the thing itself with kit.labelsAttr so each viewer's own choice (show, blur, hide) applies.

  • kit.labels()
  • 271 B of CSS · 3 rules
  • kit.css
  • No script needed
  • Strong language
  • 18+

Use it

On your server

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

const html = kit.labels(['language', '18+']);

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.labels(['language', '18+']);
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 184 B
<ul class="ovk-labels" aria-label="Content labels"><li class="ovk-label" data-label="language">Strong language</li><li class="ovk-label ovk-label--adult" data-label="18+">18+</li></ul>

What it weighs

Its own rules are 660 B, 271 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.