Steps

A flow of a few steps. Done steps link back; later ones never link ahead.

  • kit.steps()
  • 742 B of CSS · 22 rules
  • kit.css
  • kit-data.css
  • No script needed

Use it

On your server

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

const html = kit.steps({
      current: 1,
      items: [
          { label: 'Opt in', href: '/merchant' },
          { label: 'Verify the domain' },
          { label: 'Choose a plan' },
          { label: 'Live' },
      ]
  });

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.steps({
        current: 1,
        items: [
            { label: 'Opt in', href: '/merchant' },
            { label: 'Verify the domain' },
            { label: 'Choose a plan' },
            { label: 'Live' },
        ]
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 960 B
<nav class="ovk-steps" aria-label="Steps" style="--ovk-steps:4"><p class="ovk-steps-now"><span>Step 2 of 4</span> <strong>Verify the domain</strong></p><ol><li class="is-done"><a href="/merchant"><span class="ovk-steps-n" aria-hidden="true"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.7 12.1l5.4 5.4L20.4 6.1"/></svg></span><span class="ovk-steps-l">Opt in</span><span class="ovk-sr"> (done)</span></a></li><li class="is-current" aria-current="step"><span class="ovk-steps-item"><span class="ovk-steps-n" aria-hidden="true">2</span><span class="ovk-steps-l">Verify the domain</span></span></li><li class="is-next"><span class="ovk-steps-item"><span class="ovk-steps-n" aria-hidden="true">3</span><span class="ovk-steps-l">Choose a plan</span></span></li><li class="is-next"><span class="ovk-steps-item"><span class="ovk-steps-n" aria-hidden="true">4</span><span class="ovk-steps-l">Live</span></span></li></ol></nav>

What it weighs

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