Banner — OutfitKit
Banner
Aviso horizontal sobre la página o sección. Variantes semánticas (info, ok, warn, danger, brand). El slot acepta acciones (.ok-banner-action).
Info dismissible
Mantenimiento programado
El sistema se actualizará el sábado 11 may de 02:00 a 04:00 (CEST). El POS seguirá funcionando offline.
<div class="banner info">
<span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>
<div class="body">
<span class="title sm">Mantenimiento programado</span>
<span class="meta">El sistema se actualizará el sábado 11 may de 02:00 a 04:00 (CEST). El POS seguirá funcionando offline.</span>
</div>
<div class="actions"></div>
<button class="close" aria-label="Cerrar">✕</button>
</div>
{% from "banner.jinja" import banner %}
{% call banner(title="Mantenimiento programado", description="El sistema se actualizará el sábado 11 may de 02:00 a 04:00 (CEST). El POS seguirá funcionando offline.", variant="info", dismissible=True) %}{% endcall %}
<Banner title="Mantenimiento programado" description="El sistema se actualizará el sábado 11 may de 02:00 a 04:00 (CEST). El POS seguirá funcionando offline." variant="info" dismissible>
</Banner>
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 ... />
Warn con acción
3 cuentas bancarias requieren reautenticación PSD2
Reconecta antes del 15 may para no interrumpir la conciliación automática.
<div class="banner warn">
<span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></span>
<div class="body">
<span class="title sm">3 cuentas bancarias requieren reautenticación PSD2</span>
<span class="meta">Reconecta antes del 15 may para no interrumpir la conciliación automática.</span>
</div>
<div class="actions">
<a class="banner-action" href="#">Reconectar →</a>
</div>
</div>
{% from "banner.jinja" import banner %}
{% call banner(title="3 cuentas bancarias requieren reautenticación PSD2", description="Reconecta antes del 15 may para no interrumpir la conciliación automática.", variant="warn") %}
<a class="banner-action" href="#">Reconectar →</a>
{% endcall %}
<Banner title="3 cuentas bancarias requieren reautenticación PSD2" description="Reconecta antes del 15 may para no interrumpir la conciliación automática." variant="warn">
<a class="banner-action" href="#">Reconectar →</a>
</Banner>
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 ... />
Danger con acción
Stock crítico · 4 SKUs por debajo de mínimo
Café Brasil 1kg · Leche entera 1L · Croissant 60g · Servilletas 33×33.
<div class="banner danger">
<span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg></span>
<div class="body">
<span class="title sm">Stock crítico · 4 SKUs por debajo de mínimo</span>
<span class="meta">Café Brasil 1kg · Leche entera 1L · Croissant 60g · Servilletas 33×33.</span>
</div>
<div class="actions">
<a class="banner-action" href="#">Generar OC</a>
</div>
</div>
{% from "banner.jinja" import banner %}
{% call banner(title="Stock crítico · 4 SKUs por debajo de mínimo", description="Café Brasil 1kg · Leche entera 1L · Croissant 60g · Servilletas 33×33.", variant="danger") %}
<a class="banner-action" href="#">Generar OC</a>
{% endcall %}
<Banner title="Stock crítico · 4 SKUs por debajo de mínimo" description="Café Brasil 1kg · Leche entera 1L · Croissant 60g · Servilletas 33×33." variant="danger">
<a class="banner-action" href="#">Generar OC</a>
</Banner>
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 ... />
Ok · estado correcto
Conciliación bancaria al día
Las 4 cuentas activas están al 100 %. Última sincronización: hoy 15:42.
<div class="banner ok">
<span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="9 12 12 15 17 10"/></svg></span>
<div class="body">
<span class="title sm">Conciliación bancaria al día</span>
<span class="meta">Las 4 cuentas activas están al 100 %. Última sincronización: hoy 15:42.</span>
</div>
<div class="actions"></div>
</div>
{% from "banner.jinja" import banner %}
{% call banner(title="Conciliación bancaria al día", description="Las 4 cuentas activas están al 100 %. Última sincronización: hoy 15:42.", variant="ok") %}{% endcall %}
<Banner title="Conciliación bancaria al día" description="Las 4 cuentas activas están al 100 %. Última sincronización: hoy 15:42." variant="ok">
</Banner>
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 ... />
Brand
Nueva versión disponible
OutfitKit 1.4 trae un nuevo set de tokens y 8 componentes.
<div class="banner brand">
<span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 15 8l6 1-4.5 4.4L18 20l-6-3-6 3 1.5-6.6L3 9l6-1Z"/></svg></span>
<div class="body">
<span class="title sm">Nueva versión disponible</span>
<span class="meta">OutfitKit 1.4 trae un nuevo set de tokens y 8 componentes.</span>
</div>
<div class="actions">
<a class="banner-action banner-action--primary" href="#">Ver changelog</a>
</div>
</div>
{% from "banner.jinja" import banner %}
{% call banner(title="Nueva versión disponible", description="OutfitKit 1.4 trae un nuevo set de tokens y 8 componentes.", variant="brand") %}
<a class="banner-action banner-action--primary" href="#">Ver changelog</a>
{% endcall %}
<Banner title="Nueva versión disponible" description="OutfitKit 1.4 trae un nuevo set de tokens y 8 componentes." variant="brand">
<a class="banner-action banner-action--primary" href="#">Ver changelog</a>
</Banner>
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 | — | Título principal. |
description | str | "" | Descripción opcional. |
variant | "info"|"ok"|"warn"|"danger"|"brand" | "info" | Color semántico. |
dismissible | bool | false | Renderiza botón cerrar. |
attrs | dict | {} | Atributos HTML extra. |
| (slot) | — | — | Acciones .ok-banner-action. |