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

<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 "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Warn con acción

<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 "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Danger con acción

<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 "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Ok · estado correcto

<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 "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Brand

<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 "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

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