Page head

The top of a page: the way back, the page's icon and title, its actions, and one line saying what it is for.

  • kit.pageHead()
  • 1.5 KB of CSS · 47 rules
  • kit.css
  • No script needed
Rooms

Night owls

A room for people who stream after midnight.

Use it

On your server

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

const html = kit.pageHead({
      back: { href: '/kit', label: 'Rooms' },
      icon: 'chat',
      title: 'Night owls',
      lede: 'A room for people who stream after midnight.',
      actions: [{ icon: 'share', label: 'Share' }, { icon: 'more', label: 'More' }]
  });

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.pageHead({
        back: { href: '/kit', label: 'Rooms' },
        icon: 'chat',
        title: 'Night owls',
        lede: 'A room for people who stream after midnight.',
        actions: [{ icon: 'share', label: 'Share' }, { icon: 'more', label: 'More' }]
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 1.1 KB
<header class="ovk-page-head"><a class="ovk-page-back" href="/kit"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16.1 3.6l-8.4 8.4l8.4 8.4"/></svg><span>Rooms</span></a><div class="ovk-page-head-row"><span class="ovk-heading-icon"><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></span><h1>Night owls</h1><div class="ovk-page-actions"><button class="ovk-icon-btn" type="submit" aria-label="Share" title="Share"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 15.2V3.3M7.4 8.1L12 3.3L16.6 8.1M4.9 12.9v6.1a1 1 0 0 0 1 1h12.2a1 1 0 0 0 1-1v-6.1"/></svg></button><button class="ovk-icon-btn" type="submit" aria-label="More" title="More"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="5.2" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="18.8" cy="12" r="1.6"/></svg></button></div></div><p class="ovk-page-lede">A room for people who stream after midnight.</p></header>

What it weighs

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