Section

A titled block of a page, with its count and one quiet note.

  • kit.section()
  • 745 B of CSS · 23 rules
  • kit.css
  • No script needed

Members12

Who can do what

  • Ana LimaOwner

Use it

On your server

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

const html = kit.section({
      title: 'Members',
      count: 12,
      note: 'Who can do what',
      body: kit.list([kit.row({ mark: kit.mark({ name: 'Ana Lima' }), title: 'Ana Lima', sub: 'Owner' })], { flush: true })
  });

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.section({
        title: 'Members',
        count: 12,
        note: 'Who can do what',
        body: OpenVibeKit.list([OpenVibeKit.row({ mark: OpenVibeKit.mark({ name: 'Ana Lima' }), title: 'Ana Lima', sub: 'Owner' })], { flush: true })
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 426 B
<section class="ovk-section"><h2>Members<span class="ovk-count">12</span></h2><p class="ovk-note">Who can do what</p><ul class="ovk-list ovk-list--flush"><li class="ovk-row ovk-row--static"><span class="ovk-mark" style="--ovk-hue:181" aria-hidden="true">AL</span><span class="ovk-row-main"><span class="ovk-row-top"><strong>Ana Lima</strong></span><span class="ovk-row-sub"><span>Owner</span></span></span></li></ul></section>

What it weighs

Its own rules are 2.7 KB, 745 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.