Rail

A row of cards that scrolls sideways on a phone and wraps on a computer when asked. A long list never makes a long page.

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

Live now

See all

Use it

On your server

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

const html = kit.rail({
      id: 'now',
      title: 'Live now',
      more: { href: '/live', label: 'See all' },
      items: [
          kit.card({ href: '/goosely', title: 'Seattle at night', live: true, who: 'goosely', type: 'stream' }),
          kit.card({ href: '/surfwax', title: 'Surf race, heat 3', live: true, who: 'surfwax', type: 'stream' }),
          kit.card({ href: '/v/91', title: 'Building a robot arm, day 12', who: 'ana', type: 'video', count: [880, 'views'] }),
          kit.card({ href: '/v/92', title: 'Lo-fi and a rainy window', who: 'kai', type: 'video' }),
      ]
  });

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.rail({
        id: 'now',
        title: 'Live now',
        more: { href: '/live', label: 'See all' },
        items: [
            OpenVibeKit.card({ href: '/goosely', title: 'Seattle at night', live: true, who: 'goosely', type: 'stream' }),
            OpenVibeKit.card({ href: '/surfwax', title: 'Surf race, heat 3', live: true, who: 'surfwax', type: 'stream' }),
            OpenVibeKit.card({ href: '/v/91', title: 'Building a robot arm, day 12', who: 'ana', type: 'video', count: [880, 'views'] }),
            OpenVibeKit.card({ href: '/v/92', title: 'Lo-fi and a rainy window', who: 'kai', type: 'video' }),
        ]
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 6.3 KB
<section class="ovk-rail ovk-rail--m" id="now" aria-labelledby="now-h"><div class="ovk-rail-head"><h2 id="now-h">Live now</h2><a class="ovk-rail-more" href="/live">See all<svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.9 3.6l8.4 8.4l-8.4 8.4"/></svg></a></div><div class="ovk-rail-wrap"><ul class="ovk-rail-track" role="list"><li><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</a></h3><p class="ovk-card-meta"><span class="ovk-card-who">goosely</span></p></div><details class="ovk-more"><summary class="ovk-icon-btn" aria-label="More: Seattle at night" title="More: Seattle at night"><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"><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></li><li><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:304" aria-hidden="true">SU</span><div class="ovk-card-text"><h3 class="ovk-card-title"><a class="ovk-card-link" href="/surfwax">Surf race, heat 3</a></h3><p class="ovk-card-meta"><span class="ovk-card-who">surfwax</span></p></div><details class="ovk-more"><summary class="ovk-icon-btn" aria-label="More: Surf race, heat 3" title="More: Surf race, heat 3"><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="/surfwax" data-ovk-share="Surf race, heat 3"><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></li><li><article class="ovk-card ovk-card--video" 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"><path d="M5.6 3.6v16.9l13.4-8.5Z"/></svg></span></div><div class="ovk-card-body"><span class="ovk-mark" style="--ovk-mark:34px;--ovk-hue:244" aria-hidden="true">AN</span><div class="ovk-card-text"><h3 class="ovk-card-title"><a class="ovk-card-link" href="/v/91">Building a robot arm, day 12</a></h3><p class="ovk-card-meta"><span class="ovk-card-who">ana</span><span>880 views</span></p></div><details class="ovk-more"><summary class="ovk-icon-btn" aria-label="More: Building a robot arm, day 12" title="More: Building a robot arm, day 12"><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="/v/91" data-ovk-share="Building a robot arm, day 12"><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></li><li><article class="ovk-card ovk-card--video" 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"><path d="M5.6 3.6v16.9l13.4-8.5Z"/></svg></span></div><div class="ovk-card-body"><span class="ovk-mark" style="--ovk-mark:34px;--ovk-hue:99" aria-hidden="true">KA</span><div class="ovk-card-text"><h3 class="ovk-card-title"><a class="ovk-card-link" href="/v/92">Lo-fi and a rainy window</a></h3><p class="ovk-card-meta"><span class="ovk-card-who">kai</span></p></div><details class="ovk-more"><summary class="ovk-icon-btn" aria-label="More: Lo-fi and a rainy window" title="More: Lo-fi and a rainy window"><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="/v/92" data-ovk-share="Lo-fi and a rainy window"><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></li></ul><button type="button" class="ovk-rail-btn ovk-rail-prev" aria-label="Scroll back" hidden><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16.1 3.6l-8.4 8.4l8.4 8.4"/></svg></button><button type="button" class="ovk-rail-btn ovk-rail-next" aria-label="Scroll on" hidden><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.9 3.6l8.4 8.4l-8.4 8.4"/></svg></button></div></section>

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.