Card
Superficie con slot interno. El consumidor compone header / body / footer con las clases universales .head, .body, .foot, .title, .sub, .actions.
Pedido #1024
3 líneas · 87,40 €
Cliente: Juan Pérez · Mesa 7
<div class="card">
<header class="head">
<div class="heading">
<h3 class="title">Pedido #1024</h3>
<p class="sub">3 líneas · 87,40 €</p>
</div>
</header>
<div class="body">
<p>Cliente: Juan Pérez · Mesa 7</p>
</div>
</div>
{% from "card.jinja" import card %}
{% call card() %}
<header class="head">
<div class="heading">
<h3 class="title">Pedido #1024</h3>
<p class="sub">3 líneas · 87,40 €</p>
</div>
</header>
<div class="body">
<p>Cliente: Juan Pérez · Mesa 7</p>
</div>
{% endcall %}
<Card>
<header class="head">
<div class="heading">
<h3 class="title">Pedido #1024</h3>
<p class="sub">3 líneas · 87,40 €</p>
</div>
</header>
<div class="body">
<p>Cliente: Juan Pérez · Mesa 7</p>
</div>
</Card>
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 ... />
5 referencias por debajo del umbral mínimo.
<div class="card">
<header class="head">
<div class="heading">
<h3 class="title">Inventario bajo</h3>
</div>
</header>
<div class="body">
<p>5 referencias por debajo del umbral mínimo.</p>
</div>
<footer class="foot">
<button
type="button"
class="btn primary sm"
>Ver detalle</button>
<button
type="button"
class="btn ghost sm"
>Ignorar</button>
</footer>
</div>
{% from "button.jinja" import button %}
{% from "card.jinja" import card %}
{% call card() %}
<header class="head">
<div class="heading">
<h3 class="title">Inventario bajo</h3>
</div>
</header>
<div class="body">
<p>5 referencias por debajo del umbral mínimo.</p>
</div>
<footer class="foot">
{{ button("Ver detalle", variant="primary", size="sm") }}
{{ button("Ignorar", variant="ghost", size="sm") }}
</footer>
{% endcall %}
<Card>
<header class="head">
<div class="heading">
<h3 class="title">Inventario bajo</h3>
</div>
</header>
<div class="body">
<p>5 referencias por debajo del umbral mínimo.</p>
</div>
<footer class="foot">
<Button label="Ver detalle" variant="primary" size="sm" />
<Button label="Ignorar" variant="ghost" size="sm" />
</footer>
</Card>
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 ... />
Elevated
Card con sombra más pronunciada.
<div class="card elevated">
<div class="body">
<h3 class="title">Elevated</h3>
<p>Card con sombra más pronunciada.</p>
</div>
</div>
{% from "card.jinja" import card %}
{% call card(variant="elevated") %}
<div class="body">
<h3 class="title">Elevated</h3>
<p>Card con sombra más pronunciada.</p>
</div>
{% endcall %}
<Card variant="elevated">
<div class="body">
<h3 class="title">Elevated</h3>
<p>Card con sombra más pronunciada.</p>
</div>
</Card>
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 ... />
Interactive
Pasa el ratón por encima.
<div class="card interactive">
<div class="body">
<h3 class="title">Interactive</h3>
<p>Pasa el ratón por encima.</p>
</div>
</div>
{% from "card.jinja" import card %}
{% call card(interactive=True) %}
<div class="body">
<h3 class="title">Interactive</h3>
<p>Pasa el ratón por encima.</p>
</div>
{% endcall %}
<Card interactive>
<div class="body">
<h3 class="title">Interactive</h3>
<p>Pasa el ratón por encima.</p>
</div>
</Card>
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 |
|---|
variant | "default"|"flat"|"elevated"|"glass" | "default" | Estilo visual. |
interactive | bool | false | Activa hover state. |
attrs | dict | {} | Atributos HTML extra. |
| (slot) | — | — | Contenido — componer con .head, .body, .foot, .title, .sub, .actions. |