Notice

A sentence about what just happened: ok, info, warn or error. Errors are announced.

  • kit.notice()
  • 438 B of CSS · 8 rules
  • kit.css
  • No script needed

Saved. Every OpenVibe site follows.

Your stream key expires in 3 days.

Use it

On your server

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

const html = kit.notice({ kind: 'ok', text: 'Saved. Every OpenVibe site follows.' })
    + kit.notice({ kind: 'warn', text: 'Your stream key expires in 3 days.' })
    + kit.notice({ kind: 'error', text: 'That name is taken. Try another.' });

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.notice({ kind: 'ok', text: 'Saved. Every OpenVibe site follows.' })
      + OpenVibeKit.notice({ kind: 'warn', text: 'Your stream key expires in 3 days.' })
      + OpenVibeKit.notice({ kind: 'error', text: 'That name is taken. Try another.' });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 725 B
<p class="ovk-notice ovk-notice--ok" role="status"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.7 12.1l5.4 5.4L20.4 6.1"/></svg><span>Saved. Every OpenVibe site follows.</span></p><p class="ovk-notice ovk-notice--warn" role="status"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 4.5L3.6 18.8h16.9Z"/><path d="M12 10v3.7M12 16.5h0"/></svg><span>Your stream key expires in 3 days.</span></p><p class="ovk-notice ovk-notice--error" role="alert"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 4.5L3.6 18.8h16.9Z"/><path d="M12 10v3.7M12 16.5h0"/></svg><span>That name is taken. Try another.</span></p>

What it weighs

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

It is also drawn natively: Jetpack Compose and SwiftUI.