List

Rows under a title, with a link to all of them.

  • kit.list()
  • 707 B of CSS · 21 rules
  • kit.css
  • No script needed

Your rooms

All

Use it

On your server

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

const html = kit.list([kit.row({ href: '/r/night-owls', mark: kit.mark({ name: 'Night owls' }), title: 'Night owls', sub: 'ana: anyone up for the surf race?', meta: '14:05', unread: 2 }),
      kit.row({ href: '/r/robots', mark: kit.mark({ name: 'Robot arms' }), title: 'Robot arms', sub: 'kai sent a clip', meta: 'Yesterday' })], {
      title: 'Your rooms',
      more: { href: '/rooms', label: 'All' }
  });

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: '/r/night-owls', mark: OpenVibeKit.mark({ name: 'Night owls' }), title: 'Night owls', sub: 'ana: anyone up for the surf race?', meta: '14:05', unread: 2 }),
        OpenVibeKit.row({ href: '/r/robots', mark: OpenVibeKit.mark({ name: 'Robot arms' }), title: 'Robot arms', sub: 'kai sent a clip', meta: 'Yesterday' })], {
        title: 'Your rooms',
        more: { href: '/rooms', label: 'All' }
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 824 B
<div class="ovk-list-head"><h2>Your rooms</h2><a href="/rooms">All</a></div><ul class="ovk-list"><li class="ovk-row ovk-row--unread"><a href="/r/night-owls"><span class="ovk-mark" style="--ovk-hue:151" aria-hidden="true">NO</span><span class="ovk-row-main"><span class="ovk-row-top"><strong>Night owls</strong><span class="ovk-row-meta">14:05</span></span><span class="ovk-row-sub"><span>ana: anyone up for the surf race?</span><span class="ovk-dot" aria-label="2 new">2</span></span></span></a></li><li class="ovk-row"><a href="/r/robots"><span class="ovk-mark" style="--ovk-hue:85" aria-hidden="true">RA</span><span class="ovk-row-main"><span class="ovk-row-top"><strong>Robot arms</strong><span class="ovk-row-meta">Yesterday</span></span><span class="ovk-row-sub"><span>kai sent a clip</span></span></span></a></li></ul>

What it weighs

Its own rules are 2.5 KB, 707 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.

It is also drawn natively: Jetpack Compose and SwiftUI.