Row

A mark, the title with a badge and the time on one line, one muted line under it. The whole row is the link.

kit.row()
607 B of CSS · 16 rules
kit.css
No script needed

gooselylive2 hSeattle at night, chat picks the route

Use it

On your server

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

const html = kit.list([kit.row({ href: '/@goosely', mark: kit.mark({ name: 'goosely' }), title: 'goosely', badge: kit.badge('live', 'live'), meta: '2 h', sub: 'Seattle at night, chat picks the route' })]);

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.list([OpenVibeKit.row({ href: '/@goosely', mark: OpenVibeKit.mark({ name: 'goosely' }), title: 'goosely', badge: OpenVibeKit.badge('live', 'live'), meta: '2 h', sub: 'Seattle at night, chat picks the route' })]);
  OpenVibeKit.enhance(box);
</script>

The HTML it returns · 411 B

<ul class="ovk-list"><li class="ovk-row"><a href="/@goosely"><span class="ovk-mark" style="--ovk-hue:350" aria-hidden="true">GO</span><span class="ovk-row-main"><span class="ovk-row-top"><strong>goosely</strong><span class="ovk-badge ovk-badge--live">live</span><span class="ovk-row-meta">2 h</span></span><span class="ovk-row-sub"><span>Seattle at night, chat picks the route</span></span></span></a></li></ul>

What it weighs

Its own rules are 2.0 KB, 607 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.

It is also drawn natively: Jetpack Compose and SwiftUI.