Answer

The answer first, then its rows, then what to do next.

  • kit.answer()
  • 1.6 KB of CSS · 42 rules
  • kit.css
  • kit-data.css
  • No script needed

openvibe.live is reachable

Up
Address
104.21.32.1
Answered in
38 ms fast
Certificate
Valid until Jan 30, 2027
See every DNS record

Use it

On your server

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

const html = kit.answer({
      title: 'openvibe.live is reachable',
      badge: { text: 'Up', tone: 'ok' },
      rows: [['Address', '104.21.32.1'], ['Answered in', '38 ms', { text: 'fast', tone: 'ok' }], ['Certificate', 'Valid until Jan 30, 2027']],
      next: [
          kit.button({ href: '/tools/dns', label: 'See every DNS record', kind: 'quiet', small: true }),
      ]
  });

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.answer({
        title: 'openvibe.live is reachable',
        badge: { text: 'Up', tone: 'ok' },
        rows: [['Address', '104.21.32.1'], ['Answered in', '38 ms', { text: 'fast', tone: 'ok' }], ['Certificate', 'Valid until Jan 30, 2027']],
        next: [
            OpenVibeKit.button({ href: '/tools/dns', label: 'See every DNS record', kind: 'quiet', small: true }),
        ]
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 550 B
<section class="ovk-answer" aria-live="polite"><div class="ovk-answer-head"><h2>openvibe.live is reachable</h2><span class="ovk-badge ovk-badge--ok">Up</span></div><dl class="ovk-answer-rows"><div><dt>Address</dt><dd>104.21.32.1</dd></div><div><dt>Answered in</dt><dd>38 ms <span class="ovk-pill ovk-pill--ok">fast</span></dd></div><div><dt>Certificate</dt><dd>Valid until Jan 30, 2027</dd></div></dl><div class="ovk-answer-next"><a class="ovk-btn ovk-btn--quiet ovk-btn--small" href="/tools/dns"><span>See every DNS record</span></a></div></section>

What it weighs

Its own rules are 7.0 KB, 1.6 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.