Receipt

A result and what it took: the answer first, then one quiet line of facts.

  • kit.receipt()
  • 1.5 KB of CSS · 38 rules
  • kit.css
  • kit-data.css
  • No script needed

Clip saved

Open your clips
The last 30 seconds of goosely's stream are in your clips.
Length
0:30
Size
4.2 MB
Kept
until you remove it

Use it

On your server

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

const html = kit.receipt({
      title: 'Clip saved',
      body: 'The last 30 seconds of goosely\'s stream are in your clips.',
      facts: [['Length', '0:30'], ['Size', '4.2 MB'], ['Kept', 'until you remove it']],
      actions: [kit.button({ href: '/clips', label: 'Open your clips', 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.receipt({
        title: 'Clip saved',
        body: 'The last 30 seconds of goosely\'s stream are in your clips.',
        facts: [['Length', '0:30'], ['Size', '4.2 MB'], ['Kept', 'until you remove it']],
        actions: [OpenVibeKit.button({ href: '/clips', label: 'Open your clips', kind: 'quiet', small: true })]
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 486 B
<section class="ovk-receipt"><div class="ovk-receipt-head"><h2>Clip saved</h2><span class="ovk-receipt-acts"><a class="ovk-btn ovk-btn--quiet ovk-btn--small" href="/clips"><span>Open your clips</span></a></span></div><div class="ovk-receipt-body">The last 30 seconds of goosely's stream are in your clips.</div><dl class="ovk-receipt-facts"><div><dt>Length</dt><dd>0:30</dd></div><div><dt>Size</dt><dd>4.2 MB</dd></div><div><dt>Kept</dt><dd>until you remove it</dd></div></dl></section>

What it weighs

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