Empty state

What a page says when there is nothing yet, and the one thing to do about it.

  • kit.empty()
  • 1.5 KB of CSS · 37 rules
  • kit.css
  • No script needed

No rooms yet

Start the first one: public, or private to the people you invite.

Start a room

Use it

On your server

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

const html = kit.empty({
      icon: 'chat',
      title: 'No rooms yet',
      text: 'Start the first one: public, or private to the people you invite.',
      action: { href: '/rooms/new', label: 'Start a room' }
  });

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.empty({
        icon: 'chat',
        title: 'No rooms yet',
        text: 'Start the first one: public, or private to the people you invite.',
        action: { href: '/rooms/new', label: 'Start a room' }
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 351 B
<div class="ovk-empty"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.8 4.3h16.8v11.7H8l-4.2 4.2Z"/></svg><p class="ovk-empty-title">No rooms yet</p><p>Start the first one: public, or private to the people you invite.</p><a class="ovk-btn ovk-btn--primary" href="/rooms/new"><span>Start a room</span></a></div>

What it weighs

Its own rules are 6.4 KB, 1.5 KB as sent: 8% 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.