Stories bar
A scrolling row of avatars with a ring for new stories and a grey ring for seen ones.
Stories
<ul class="mn-storybar" style="max-width:34rem">
<li><a href="#" aria-label="Ana, new story"><span class="mn-storybar-ring"><span class="mn-avatar" aria-hidden="true">AP</span></span><span class="mn-storybar-label" aria-hidden="true">Ana</span></a></li><li><a href="#" aria-label="Jonas, new story"><span class="mn-storybar-ring"><span class="mn-avatar" aria-hidden="true">JO</span></span><span class="mn-storybar-label" aria-hidden="true">Jonas</span></a></li><li><a href="#" aria-label="Ilinca, new story"><span class="mn-storybar-ring"><span class="mn-avatar" aria-hidden="true">IS</span></span><span class="mn-storybar-label" aria-hidden="true">Ilinca</span></a></li><li><a href="#" data-seen aria-label="Lea"><span class="mn-storybar-ring"><span class="mn-avatar" aria-hidden="true">LK</span></span><span class="mn-storybar-label" aria-hidden="true">Lea</span></a></li><li><a href="#" data-seen aria-label="Maren"><span class="mn-storybar-ring"><span class="mn-avatar" aria-hidden="true">MR</span></span><span class="mn-storybar-label" aria-hidden="true">Maren</span></a></li><li><a href="#" data-seen aria-label="Radu"><span class="mn-storybar-ring"><span class="mn-avatar" aria-hidden="true">RE</span></span><span class="mn-storybar-label" aria-hidden="true">Radu</span></a></li><li><a href="#" data-seen aria-label="Kenji"><span class="mn-storybar-ring"><span class="mn-avatar" aria-hidden="true">KM</span></span><span class="mn-storybar-label" aria-hidden="true">Kenji</span></a></li>
</ul>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/stories-bar.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-storybar | The row (<ul>). |
| mn-storybar-ring | The ring around an avatar; data-seen on the link makes it grey. |
| mn-storybar-label | The name under it. |
Accessibility
- Each item is a link or button whose name says whose story it is and whether it is new (“Ana, new story”).
- The row scrolls horizontally with the keyboard focus.