Tool head

What the tool does, in its colour, with the facts that matter (free, no sign-in, what is kept).

  • kit.toolHead()
  • 571 B of CSS · 16 rules
  • kit.css
  • kit-data.css
  • No script needed
Tools

Shrink an image

Make a picture smaller without it looking worse.

  • Free
  • No sign-in
  • Nothing kept

Use it

On your server

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

const html = kit.toolHead({
      icon: 'image',
      hue: 280,
      family: 'Images',
      crumb: { href: '/tools', label: 'Tools' },
      title: 'Shrink an image',
      task: 'Make a picture smaller without it looking worse.',
      facts: ['Free', 'No sign-in', 'Nothing kept'],
      level: 2
  });

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.toolHead({
        icon: 'image',
        hue: 280,
        family: 'Images',
        crumb: { href: '/tools', label: 'Tools' },
        title: 'Shrink an image',
        task: 'Make a picture smaller without it looking worse.',
        facts: ['Free', 'No sign-in', 'Nothing kept'],
        level: 2
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 708 B
<header class="ovk-tool-head" style="--ovk-tint-h:280"><span class="ovk-tool-tile" aria-hidden="true"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3.5" y="5.4" width="16.7" height="13" rx="2.8"/><circle cx="9.1" cy="10" r="1.5"/><path d="M20.3 15.6l-4.7-4.7l-7.4 7.4"/></svg></span><a class="ovk-tool-crumb" href="/tools">Tools<svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.9 3.6l8.4 8.4l-8.4 8.4"/></svg></a><h2 class="ovk-tool-title">Shrink an image</h2><p class="ovk-tool-task">Make a picture smaller without it looking worse.</p><ul class="ovk-tool-facts"><li>Free</li><li>No sign-in</li><li>Nothing kept</li></ul></header>

What it weighs

Its own rules are 1.9 KB, 571 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.