Stepper

Progreso por pasos. Compón los .stepper-step con estado --done / --active y .stepper-bullet + universal .label (texto del paso) y .meta (sub-texto).

Horizontal · checkout

Carrito

3 productos
Cliente

Marisol G.
3

Pago

en curso
4

Ticket

<ol class="stepper" style="list-style:none;padding:0;margin:0">
  
<li class="stepper-step stepper-step--done">
  <div class="stepper-bullet">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
  </div>
  <div class="label">Carrito</div>
  <div class="meta">3 productos</div>
</li>
<li class="stepper-step stepper-step--done">
  <div class="stepper-bullet">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
  </div>
  <div class="label">Cliente</div>
  <div class="meta">Marisol G.</div>
</li>
<li class="stepper-step stepper-step--active">
  <div class="stepper-bullet">3</div>
  <div class="label">Pago</div>
  <div class="meta">en curso</div>
</li>
<li class="stepper-step">
  <div class="stepper-bullet">4</div>
  <div class="label">Ticket</div>
</li>

</ol>

{% from "stepper.jinja" import stepper %}
{% call stepper() %}
<li class="stepper-step stepper-step--done">
  <div class="stepper-bullet">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
  </div>
  <div class="label">Carrito</div>
  <div class="meta">3 productos</div>
</li>
<li class="stepper-step stepper-step--done">
  <div class="stepper-bullet">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
  </div>
  <div class="label">Cliente</div>
  <div class="meta">Marisol G.</div>
</li>
<li class="stepper-step stepper-step--active">
  <div class="stepper-bullet">3</div>
  <div class="label">Pago</div>
  <div class="meta">en curso</div>
</li>
<li class="stepper-step">
  <div class="stepper-bullet">4</div>
  <div class="label">Ticket</div>
</li>
{% endcall %}

<Stepper>
<li class="stepper-step stepper-step--done">
  <div class="stepper-bullet">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
  </div>
  <div class="label">Carrito</div>
  <div class="meta">3 productos</div>
</li>
<li class="stepper-step stepper-step--done">
  <div class="stepper-bullet">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
  </div>
  <div class="label">Cliente</div>
  <div class="meta">Marisol G.</div>
</li>
<li class="stepper-step stepper-step--active">
  <div class="stepper-bullet">3</div>
  <div class="label">Pago</div>
  <div class="meta">en curso</div>
</li>
<li class="stepper-step">
  <div class="stepper-bullet">4</div>
  <div class="label">Ticket</div>
</li>
</Stepper>

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

Vertical · onboarding

Datos fiscales

CIF B12345678 verificado en agencia tributaria.
Catálogo importado

142 productos · 18 categorías.
3

Configuración de impuestos

Define los tipos de IVA aplicables y zonas de envío.
4

Conectar TPV físico

Empareja tu impresora y cajón portamonedas.
5

Equipo y permisos

<ol class="stepper vertical" style="list-style:none;padding:0;margin:0">
  
<li class="stepper-step stepper-step--done">
  <div class="stepper-bullet">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
  </div>
  <div class="stepper-body">
    <div class="label">Datos fiscales</div>
    <div class="stepper-desc">CIF B12345678 verificado en agencia tributaria.</div>
  </div>
</li>
<li class="stepper-step stepper-step--done">
  <div class="stepper-bullet">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
  </div>
  <div class="stepper-body">
    <div class="label">Catálogo importado</div>
    <div class="stepper-desc">142 productos · 18 categorías.</div>
  </div>
</li>
<li class="stepper-step stepper-step--active">
  <div class="stepper-bullet">3</div>
  <div class="stepper-body">
    <div class="label">Configuración de impuestos</div>
    <div class="stepper-desc">Define los tipos de IVA aplicables y zonas de envío.</div>
  </div>
</li>
<li class="stepper-step">
  <div class="stepper-bullet">4</div>
  <div class="stepper-body">
    <div class="label">Conectar TPV físico</div>
    <div class="stepper-desc">Empareja tu impresora y cajón portamonedas.</div>
  </div>
</li>
<li class="stepper-step">
  <div class="stepper-bullet">5</div>
  <div class="stepper-body">
    <div class="label">Equipo y permisos</div>
  </div>
</li>

</ol>

{% from "stepper.jinja" import stepper %}
{% call stepper(orientation="vertical") %}
<li class="stepper-step stepper-step--done">
  <div class="stepper-bullet">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
  </div>
  <div class="stepper-body">
    <div class="label">Datos fiscales</div>
    <div class="stepper-desc">CIF B12345678 verificado en agencia tributaria.</div>
  </div>
</li>
<li class="stepper-step stepper-step--done">
  <div class="stepper-bullet">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
  </div>
  <div class="stepper-body">
    <div class="label">Catálogo importado</div>
    <div class="stepper-desc">142 productos · 18 categorías.</div>
  </div>
</li>
<li class="stepper-step stepper-step--active">
  <div class="stepper-bullet">3</div>
  <div class="stepper-body">
    <div class="label">Configuración de impuestos</div>
    <div class="stepper-desc">Define los tipos de IVA aplicables y zonas de envío.</div>
  </div>
</li>
<li class="stepper-step">
  <div class="stepper-bullet">4</div>
  <div class="stepper-body">
    <div class="label">Conectar TPV físico</div>
    <div class="stepper-desc">Empareja tu impresora y cajón portamonedas.</div>
  </div>
</li>
<li class="stepper-step">
  <div class="stepper-bullet">5</div>
  <div class="stepper-body">
    <div class="label">Equipo y permisos</div>
  </div>
</li>
{% endcall %}

<Stepper orientation="vertical">
<li class="stepper-step stepper-step--done">
  <div class="stepper-bullet">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
  </div>
  <div class="stepper-body">
    <div class="label">Datos fiscales</div>
    <div class="stepper-desc">CIF B12345678 verificado en agencia tributaria.</div>
  </div>
</li>
<li class="stepper-step stepper-step--done">
  <div class="stepper-bullet">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
  </div>
  <div class="stepper-body">
    <div class="label">Catálogo importado</div>
    <div class="stepper-desc">142 productos · 18 categorías.</div>
  </div>
</li>
<li class="stepper-step stepper-step--active">
  <div class="stepper-bullet">3</div>
  <div class="stepper-body">
    <div class="label">Configuración de impuestos</div>
    <div class="stepper-desc">Define los tipos de IVA aplicables y zonas de envío.</div>
  </div>
</li>
<li class="stepper-step">
  <div class="stepper-bullet">4</div>
  <div class="stepper-body">
    <div class="label">Conectar TPV físico</div>
    <div class="stepper-desc">Empareja tu impresora y cajón portamonedas.</div>
  </div>
</li>
<li class="stepper-step">
  <div class="stepper-bullet">5</div>
  <div class="stepper-body">
    <div class="label">Equipo y permisos</div>
  </div>
</li>
</Stepper>

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
`orientation`	"horizontal"\|"vertical"	"horizontal"	Disposición de los pasos.
`attrs`	dict	{}	Atributos HTML extra.
(slot)	—	—	Items `.stepper-step` con estado `--done` / `--active`. Texto con `.label`, sub con `.meta`.