Family

The tools next to this one.

kit.family()
459 B of CSS · 12 rules
kit-data.css
No script needed

Use it

On your server

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

const html = kit.family({
      title: 'More image tools',
      more: { href: '/tools/images', label: 'All 14' },
      items: [
          { href: '/tools/crop', label: 'Crop', icon: 'image' },
          { href: '/tools/convert', label: 'Convert', icon: 'swap' },
          { href: '/tools/remove-bg', label: 'Remove the background', icon: 'spark' },
      ]
  });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<link rel="stylesheet" href="https://openvibe.network/shared/kit-data.css">
<script src="https://openvibe.network/shared/kit.js"></script>
<script src="https://openvibe.network/shared/kit-web.js" defer></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.family({
        title: 'More image tools',
        more: { href: '/tools/images', label: 'All 14' },
        items: [
            { href: '/tools/crop', label: 'Crop', icon: 'image' },
            { href: '/tools/convert', label: 'Convert', icon: 'swap' },
            { href: '/tools/remove-bg', label: 'Remove the background', icon: 'spark' },
        ]
    });
  OpenVibeKit.enhance(box);
</script>

The HTML it returns · 308 B

<nav class="ovk-family" aria-label="More image tools"><div class="ovk-family-head"><h2>More image tools</h2><a href="/tools/images">All 14</a></div><div class="ovk-family-items"><a href="/tools/crop">Crop</a><a href="/tools/convert">Convert</a><a href="/tools/remove-bg">Remove the background</a></div></nav>

What it weighs

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