Head

The top of an app page: back, the title, one muted line, icon actions and the tabs. It sticks under the navbar.

  • kit.head()
  • 1.5 KB of CSS · 45 rules
  • kit.css
  • No script needed

Settings

Saved to your account

Use it

On your server

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

const html = kit.head({
      title: 'Settings',
      sub: 'Saved to your account',
      back: { href: '/', label: 'Home' },
      level: 2,
      sticky: false,
      actions: [kit.iconButton({ href: '/help', icon: 'help', label: 'Help' })],
      tabs: kit.tabs({ base: '/kit/head', items: [
          { key: 'look', label: 'Look' },
          { key: 'sound', label: 'Sound' },
          { key: 'privacy', label: 'Privacy' }], active: 'look' })
  });

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.head({
        title: 'Settings',
        sub: 'Saved to your account',
        back: { href: '/', label: 'Home' },
        level: 2,
        sticky: false,
        actions: [OpenVibeKit.iconButton({ href: '/help', icon: 'help', label: 'Help' })],
        tabs: OpenVibeKit.tabs({ base: '/kit/head', items: [
            { key: 'look', label: 'Look' },
            { key: 'sound', label: 'Sound' },
            { key: 'privacy', label: 'Privacy' }], active: 'look' })
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 893 B
<header class="ovk-head ovk-head--static"><div class="ovk-head-row"><a class="ovk-icon-btn ovk-back" href="/" aria-label="Home" title="Home"><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></a><div class="ovk-head-id"><h2>Settings</h2><p class="ovk-sub">Saved to your account</p></div><div class="ovk-head-tools"><a class="ovk-icon-btn" href="/help" aria-label="Help" title="Help"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8.5"/><path d="M9.6 9.3a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.8M12 17h.01"/></svg></a></div></div><nav class="ovk-tabs" aria-label="Sections"><a href="/kit/head?tab=look" aria-current="page"><span>Look</span></a><a href="/kit/head?tab=sound"><span>Sound</span></a><a href="/kit/head?tab=privacy"><span>Privacy</span></a></nav></header>

What it weighs

Its own rules are 6.6 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.