# Notification list · MIAN

An inbox of notifications with unread markers, icons or avatars, times and inline actions.

- Id: `notifications` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/notifications
- Use for: notifications list, inbox, activity feed, alerts center.

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-notifications`: The list (<ul>).
- `mn-notification`: One notification: an avatar or mn-notification-icon (with a colour role), text, <time>, optional mn-notification-actions. data-unread marks it unread.

## Accessibility

- Say “Unread” in text (a visually hidden span), the dot alone is not announced.
- Put the time in <time datetime="…">.

## Examples

### Inbox

```html
<div class="mn-card" style="max-width:30rem"><ul class="mn-notifications">
  <li class="mn-notification" data-unread><span class="mn-avatar mn-avatar-sm" aria-hidden="true">MR</span><p><span class="mn-sr-only">Unread: </span><strong>Maren Richter</strong> approved 42 matches in Operating · 4410.</p><time datetime="2026-09-25T09:12">9 min</time><div class="mn-notification-actions"><a class="mn-btn mn-btn-xs mn-btn-outline" href="#">View</a></div></li>
  <li class="mn-notification" data-unread><span class="mn-notification-icon mn-warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 2 20h20L12 3Z"/><path d="M12 10v4M12 17v.01"/></svg></span><p><span class="mn-sr-only">Unread: </span>Storage is at <strong>84%</strong> of your plan.</p><time datetime="2026-09-25T07:00">2 h</time></li>
  <li class="mn-notification"><span class="mn-notification-icon mn-success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg></span><p>August closed in <strong>3 days</strong>. Report ready.</p><time datetime="2026-09-03">3 Sep</time></li>
</ul></div>
```

## Source

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