# Stories bar · MIAN

A scrolling row of avatars with a ring for new stories and a grey ring for seen ones.

- Id: `stories-bar` · Category: Navigation · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/stories-bar
- Use for: stories, story avatars, social stories row.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Stories

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/stories-bar/source