Card

A stream, a clip, a room or a place: picture first, the title, who, and one line.

  • kit.card()
  • 1.3 KB of CSS · 34 rules
  • kit.css
  • No script needed

Use it

On your server

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

const html = kit.card({
      href: '/goosely',
      title: 'Seattle at night, chat picks the route',
      type: 'stream',
      live: true,
      who: 'goosely',
      count: [1204, 'watching'],
      sub: 'IRL · Capitol Hill'
  });

In a page that draws itself

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

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.card({
        href: '/goosely',
        title: 'Seattle at night, chat picks the route',
        type: 'stream',
        live: true,
        who: 'goosely',
        count: [1204, 'watching'],
        sub: 'IRL · Capitol Hill'
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 1.6 KB
<article class="ovk-card is-live ovk-card--stream" style="--ovk-ar:16/9"><div class="ovk-card-media"><span class="ovk-card-noimg"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="11.8" r="2"/><path d="M8.6 8.4a4.9 4.9 0 0 0 0 7.1M15.4 8.4a4.9 4.9 0 0 1 0 7.1M6.3 6.1a8.1 8.1 0 0 0 0 11.9M17.7 6.1a8.1 8.1 0 0 1 0 11.9"/></svg></span><span class="ovk-card-badge is-live">LIVE</span></div><div class="ovk-card-body"><span class="ovk-mark" style="--ovk-mark:34px;--ovk-hue:350" aria-hidden="true">GO</span><div class="ovk-card-text"><h3 class="ovk-card-title"><a class="ovk-card-link" href="/goosely">Seattle at night, chat picks the route</a></h3><p class="ovk-card-sub">IRL · Capitol Hill</p><p class="ovk-card-meta"><span class="ovk-card-who">goosely</span><span>1.2k watching</span></p></div><details class="ovk-more"><summary class="ovk-icon-btn" aria-label="More: Seattle at night, chat picks the route" title="More: Seattle at night, chat picks the route"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="5.2" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="18.8" cy="12" r="1.6"/></svg></summary><div class="ovk-pop" role="menu"><a class="ovk-pop-item" role="menuitem" href="/goosely" data-ovk-share="Seattle at night, chat picks the route"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14 3.8h6.3v6.3M20.2 3.8l-9.4 9.4M18.2 14.2v4.2a2.1 2.1 0 0 1-2.1 2.1H5.6a2.1 2.1 0 0 1-2.1-2.1V7.9a2.1 2.1 0 0 1 2.1-2.1h4.2"/></svg><span>Share</span></a></div></details></div></article>

What it weighs

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

It is also drawn natively: Jetpack Compose and SwiftUI.