Panel

Bloque-superficie con cabecera (título + sub) y body. Variantes ghost, bordered, flush, sticky-head y tamaños sm/lg.

Por defecto con título

Pedidos pendientes

Hoy · 12 órdenes en cola

Panel base con head + body. Bg-2, line, radius-lg.

<div class="panel">
  
  <header class="head">
    <div class="heading">
      <h3 class="title">Pedidos pendientes</h3>
      <p class="sub">Hoy · 12 órdenes en cola</p>
    </div>
    
  </header>
  
  <div class="body">
<p style="margin:0;color:var(--ink-3);font-size:13px">Panel base con head + body. Bg-2, line, radius-lg.</p>
</div>
  
</div>

{% from "panel.jinja" import panel %}
{% call panel(title="Pedidos pendientes", sub="Hoy · 12 órdenes en cola") %}
<p style="margin:0;color:var(--ink-3);font-size:13px">Panel base con head + body. Bg-2, line, radius-lg.</p>
{% endcall %}

<Panel title="Pedidos pendientes" sub="Hoy · 12 órdenes en cola">
<p style="margin:0;color:var(--ink-3);font-size:13px">Panel base con head + body. Bg-2, line, radius-lg.</p>
</Panel>

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

Variante ghost (sin fondo)

Ghost

Sin fondo, solo borde

Variante ghost: transparente.

<div class="panel ghost">
  
  <header class="head">
    <div class="heading">
      <h3 class="title">Ghost</h3>
      <p class="sub">Sin fondo, solo borde</p>
    </div>
    
  </header>
  
  <div class="body">
<p style="margin:0;color:var(--ink-3);font-size:13px">Variante ghost: transparente.</p>
</div>
  
</div>

{% from "panel.jinja" import panel %}
{% call panel(title="Ghost", sub="Sin fondo, solo borde", variant="ghost") %}
<p style="margin:0;color:var(--ink-3);font-size:13px">Variante ghost: transparente.</p>
{% endcall %}

<Panel title="Ghost" sub="Sin fondo, solo borde" variant="ghost">
<p style="margin:0;color:var(--ink-3);font-size:13px">Variante ghost: transparente.</p>
</Panel>

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

Variante bordered

Bordered

Borde más fuerte

Variante bordered · usa line-2.

<div class="panel bordered">
  
  <header class="head">
    <div class="heading">
      <h3 class="title">Bordered</h3>
      <p class="sub">Borde más fuerte</p>
    </div>
    
  </header>
  
  <div class="body">
<p style="margin:0;color:var(--ink-3);font-size:13px">Variante bordered · usa line-2.</p>
</div>
  
</div>

{% from "panel.jinja" import panel %}
{% call panel(title="Bordered", sub="Borde más fuerte", variant="bordered") %}
<p style="margin:0;color:var(--ink-3);font-size:13px">Variante bordered · usa line-2.</p>
{% endcall %}

<Panel title="Bordered" sub="Borde más fuerte" variant="bordered">
<p style="margin:0;color:var(--ink-3);font-size:13px">Variante bordered · usa line-2.</p>
</Panel>

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

Tamaño compacto (sm)

Compact

Tamaño sm con padding y title más pequeños.

<div class="panel sm">
  
  <header class="head">
    <div class="heading">
      <h3 class="title">Compact</h3>
      
    </div>
    
  </header>
  
  <div class="body">
<p style="margin:0;color:var(--ink-3);font-size:13px">Tamaño sm con padding y title más pequeños.</p>
</div>
  
</div>

{% from "panel.jinja" import panel %}
{% call panel(title="Compact", size="sm") %}
<p style="margin:0;color:var(--ink-3);font-size:13px">Tamaño sm con padding y title más pequeños.</p>
{% endcall %}

<Panel title="Compact" size="sm">
<p style="margin:0;color:var(--ink-3);font-size:13px">Tamaño sm con padding y title más pequeños.</p>
</Panel>

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

Sticky-head — cabecera fija al scrollear

Actividad reciente

Últimas 24 h

10:14 · Nuevo pedido FCT-2026-00184
10:08 · Stock bajo: Camiseta básica L
09:51 · Pago recibido · 234,50 €
09:30 · Factura emitida FCT-2026-00183
08:47 · Cliente nuevo · Ana Pérez
08:22 · Devolución cerrada · DEV-019
07:55 · Cierre caja · Turno noche
07:10 · Apertura caja · Turno mañana
06:00 · Backup nocturno OK
23:42 · Sincronización catálogo

<div style="max-height: 220px; overflow-y: auto; border-radius: var(--radius-lg);">
<div class="panel sticky-head">
  
  <header class="head">
    <div class="heading">
      <h3 class="title">Actividad reciente</h3>
      <p class="sub">Últimas 24 h</p>
    </div>
    
  </header>
  
  <div class="body">
<ul style="margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:13px;color:var(--ink-2)">
  <li>10:14 · Nuevo pedido FCT-2026-00184</li>
  <li>10:08 · Stock bajo: Camiseta básica L</li>
  <li>09:51 · Pago recibido · 234,50 €</li>
  <li>09:30 · Factura emitida FCT-2026-00183</li>
  <li>08:47 · Cliente nuevo · Ana Pérez</li>
  <li>08:22 · Devolución cerrada · DEV-019</li>
  <li>07:55 · Cierre caja · Turno noche</li>
  <li>07:10 · Apertura caja · Turno mañana</li>
  <li>06:00 · Backup nocturno OK</li>
  <li>23:42 · Sincronización catálogo</li>
</ul>
</div>
  
</div>
</div>

{% from "panel.jinja" import panel %}
{# Variante sticky-head: la cabecera permanece visible al scrollear el body. #}
<div style="max-height: 220px; overflow-y: auto; border-radius: var(--radius-lg);">
{% call panel(title="Actividad reciente", sub="Últimas 24 h", variant="sticky-head") %}
<ul style="margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:13px;color:var(--ink-2)">
  <li>10:14 · Nuevo pedido FCT-2026-00184</li>
  <li>10:08 · Stock bajo: Camiseta básica L</li>
  <li>09:51 · Pago recibido · 234,50 €</li>
  <li>09:30 · Factura emitida FCT-2026-00183</li>
  <li>08:47 · Cliente nuevo · Ana Pérez</li>
  <li>08:22 · Devolución cerrada · DEV-019</li>
  <li>07:55 · Cierre caja · Turno noche</li>
  <li>07:10 · Apertura caja · Turno mañana</li>
  <li>06:00 · Backup nocturno OK</li>
  <li>23:42 · Sincronización catálogo</li>
</ul>
{% endcall %}
</div>

<div style="max-height: 220px; overflow-y: auto; border-radius: var(--radius-lg);">
<Panel title="Actividad reciente" sub="Últimas 24 h" variant="sticky-head">
<ul>… items …</ul>
</Panel>
</div>

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

Sin head, solo body

Body suelto sin cabecera.

<div class="panel">
  
  <div class="body">
<p style="margin:0">Body suelto sin cabecera.</p>
</div>
  
</div>

{% from "panel.jinja" import panel %}
{% call panel() %}
<p style="margin:0">Body suelto sin cabecera.</p>
{% endcall %}

<Panel>
<p style="margin:0">Body suelto sin cabecera.</p>
</Panel>

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 de la cabecera.
`sub`	str\|None	None	Subtítulo opcional.
`variant`	"ghost"\|"bordered"\|"flush"\|"sticky-head"\|None	None	Modificador visual.
`size`	"sm"\|"lg"\|None	None	Densidad.
`attrs`	dict	{}	Atributos HTML extra.
(slot)	—	—	Contenido del body.