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
MV
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 "<component>.jinja" import <component> %}
{{ <component>(...) }}
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. |