Notification center — OutfitKit

Notification center

Lista filtrable de notificaciones .ok-notif con head (título + contador), filtros y items unread/read. La macro system_overlays es el contenedor; el consumidor compone los items.

Centro de notificaciones

Notificaciones 4

Marina V. te ha mencionado en WO-184

«Necesito que revises el QA antes de las 14h»

12:42

Stock crítico en CP-WHL-073 — 0 unidades

Bloquea WO-184 · línea L-2

11:18

Factura F-2026-0182 cobrada — €3.218,40

Norden Bikes · transferencia

10:04

Recordatorio: backup mensual programado mañana 03:00

Sistema

ayer

<div class="notif">
  
  <header class="head">
    <h3 class="title">Notificaciones <b title="4 sin leer" aria-label="4 notificaciones sin leer">4</b></h3>
  </header>
  
  
<div class="notif-filters">
  <button class="notif-filter notif-filter--active">Todas</button>
  <button class="notif-filter">Sin leer</button>
  <button class="notif-filter">Menciones</button>
  <button class="notif-filter">Sistema</button>
</div>
<div class="notif-list" role="list">
  <div class="notif-item notif-item--unread" role="listitem" aria-label="Notificación de Marina V. — te ha mencionado en WO-184, hace 12:42">
    <div class="notif-avatar notif-icon--brand" aria-hidden="true">MV</div>
    <div class="notif-body">
      <div class="notif-text"><b>Marina V.</b> te ha mencionado en <b>WO-184</b></div>
      <div class="notif-meta">«Necesito que revises el QA antes de las 14h»</div>
    </div>
    <div class="notif-time">12:42</div>
  </div>
  <div class="notif-item notif-item--unread" role="listitem" aria-label="Notificación del sistema — Stock crítico en CP-WHL-073, 0 unidades, 11:18">
    <div class="notif-icon notif-icon--warn" aria-hidden="true">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
    </div>
    <div class="notif-body">
      <div class="notif-text">Stock crítico en <b>CP-WHL-073</b> — 0 unidades</div>
      <div class="notif-meta">Bloquea WO-184 · línea L-2</div>
    </div>
    <div class="notif-time">11:18</div>
  </div>
  <div class="notif-item notif-item--unread" role="listitem" aria-label="Notificación de facturación — Factura F-2026-0182 cobrada por 3.218,40 euros, 10:04">
    <div class="notif-icon notif-icon--leaf" aria-hidden="true">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
    </div>
    <div class="notif-body">
      <div class="notif-text">Factura <b>F-2026-0182</b> cobrada — €3.218,40</div>
      <div class="notif-meta">Norden Bikes · transferencia</div>
    </div>
    <div class="notif-time">10:04</div>
  </div>
  <div class="notif-item" role="listitem" aria-label="Notificación programada del sistema — Recordatorio backup mensual mañana 03:00, ayer">
    <div class="notif-icon notif-icon--info" aria-hidden="true">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
    </div>
    <div class="notif-body">
      <div class="notif-text">Recordatorio: backup mensual programado mañana 03:00</div>
      <div class="notif-meta">Sistema</div>
    </div>
    <div class="notif-time">ayer</div>
  </div>
</div>
<footer class="notif-foot">
  <a class="notif-see-all" href="#" title="Ver todas las notificaciones" aria-label="Ver todas las notificaciones">
    Ver todas
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
  </a>
</footer>

</div>

{% from "system-overlays.jinja" import system_overlays %}
{% call system_overlays(title="Notificaciones", count=4) %}
<div class="notif-filters">
  <button class="notif-filter notif-filter--active">Todas</button>
  <button class="notif-filter">Sin leer</button>
  <button class="notif-filter">Menciones</button>
  <button class="notif-filter">Sistema</button>
</div>
<div class="notif-list" role="list">
  <div class="notif-item notif-item--unread" role="listitem" aria-label="Notificación de Marina V. — te ha mencionado en WO-184, hace 12:42">
    <div class="notif-avatar notif-icon--brand" aria-hidden="true">MV</div>
    <div class="notif-body">
      <div class="notif-text"><b>Marina V.</b> te ha mencionado en <b>WO-184</b></div>
      <div class="notif-meta">«Necesito que revises el QA antes de las 14h»</div>
    </div>
    <div class="notif-time">12:42</div>
  </div>
  <div class="notif-item notif-item--unread" role="listitem" aria-label="Notificación del sistema — Stock crítico en CP-WHL-073, 0 unidades, 11:18">
    <div class="notif-icon notif-icon--warn" aria-hidden="true">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
    </div>
    <div class="notif-body">
      <div class="notif-text">Stock crítico en <b>CP-WHL-073</b> — 0 unidades</div>
      <div class="notif-meta">Bloquea WO-184 · línea L-2</div>
    </div>
    <div class="notif-time">11:18</div>
  </div>
  <div class="notif-item notif-item--unread" role="listitem" aria-label="Notificación de facturación — Factura F-2026-0182 cobrada por 3.218,40 euros, 10:04">
    <div class="notif-icon notif-icon--leaf" aria-hidden="true">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
    </div>
    <div class="notif-body">
      <div class="notif-text">Factura <b>F-2026-0182</b> cobrada — €3.218,40</div>
      <div class="notif-meta">Norden Bikes · transferencia</div>
    </div>
    <div class="notif-time">10:04</div>
  </div>
  <div class="notif-item" role="listitem" aria-label="Notificación programada del sistema — Recordatorio backup mensual mañana 03:00, ayer">
    <div class="notif-icon notif-icon--info" aria-hidden="true">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
    </div>
    <div class="notif-body">
      <div class="notif-text">Recordatorio: backup mensual programado mañana 03:00</div>
      <div class="notif-meta">Sistema</div>
    </div>
    <div class="notif-time">ayer</div>
  </div>
</div>
<footer class="notif-foot">
  <a class="notif-see-all" href="#" title="Ver todas las notificaciones" aria-label="Ver todas las notificaciones">
    Ver todas
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
  </a>
</footer>
{% endcall %}

<SystemOverlays title="Notificaciones" count="4">
<div class="notif-filters">
  <button class="notif-filter notif-filter--active">Todas</button>
  <button class="notif-filter">Sin leer</button>
  <button class="notif-filter">Menciones</button>
  <button class="notif-filter">Sistema</button>
</div>
<div class="notif-list" role="list">
  <div class="notif-item notif-item--unread" role="listitem" aria-label="Notificación de Marina V. — te ha mencionado en WO-184, hace 12:42">
    <div class="notif-avatar notif-icon--brand" aria-hidden="true">MV</div>
    <div class="notif-body">
      <div class="notif-text"><b>Marina V.</b> te ha mencionado en <b>WO-184</b></div>
      <div class="notif-meta">«Necesito que revises el QA antes de las 14h»</div>
    </div>
    <div class="notif-time">12:42</div>
  </div>
  <div class="notif-item notif-item--unread" role="listitem" aria-label="Notificación del sistema — Stock crítico en CP-WHL-073, 0 unidades, 11:18">
    <div class="notif-icon notif-icon--warn" aria-hidden="true">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
    </div>
    <div class="notif-body">
      <div class="notif-text">Stock crítico en <b>CP-WHL-073</b> — 0 unidades</div>
      <div class="notif-meta">Bloquea WO-184 · línea L-2</div>
    </div>
    <div class="notif-time">11:18</div>
  </div>
  <div class="notif-item notif-item--unread" role="listitem" aria-label="Notificación de facturación — Factura F-2026-0182 cobrada por 3.218,40 euros, 10:04">
    <div class="notif-icon notif-icon--leaf" aria-hidden="true">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
    </div>
    <div class="notif-body">
      <div class="notif-text">Factura <b>F-2026-0182</b> cobrada — €3.218,40</div>
      <div class="notif-meta">Norden Bikes · transferencia</div>
    </div>
    <div class="notif-time">10:04</div>
  </div>
  <div class="notif-item" role="listitem" aria-label="Notificación programada del sistema — Recordatorio backup mensual mañana 03:00, ayer">
    <div class="notif-icon notif-icon--info" aria-hidden="true">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
    </div>
    <div class="notif-body">
      <div class="notif-text">Recordatorio: backup mensual programado mañana 03:00</div>
      <div class="notif-meta">Sistema</div>
    </div>
    <div class="notif-time">ayer</div>
  </div>
</div>
<footer class="notif-foot">
  <a class="notif-see-all" href="#" title="Ver todas las notificaciones" aria-label="Ver todas las notificaciones">
    Ver todas
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
  </a>
</footer>
</SystemOverlays>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API

Prop	Tipo	Default	Descripción
`title`	str\|None	None	Título del head.
`count`	int\|None	None	Contador junto al título.
`attrs`	dict	{}	Atributos HTML extra.
(slot)	—	—	Filtros + items + footer.