Kanban

Tablero kanban con columnas y tarjetas arrastrables. Construido a partir de primitivos: no existe ningún componente Kanban en OutfitKit. Es composición de un grid horizontal scrollable + columnas con Card + tarjetas con Card interactive. Consulta el ejemplo completo en examples/mini-apps/kanban.html.

Composición: wrapper con display:flex; overflow-x:auto + columnas de ancho fijo (~280 px) con header (.title.sm + Chip count) + body con Card tarjetas + footer con Button ghost block para añadir.

Pipeline de leads

Nuevo

DemoQ2

Distribuidora Ibérica · catálogo Q2

Demo del módulo de inventario y compras antes del 28 de mayo.

📅 28 may💬 3

Panadería Marisol · 2 puntos de venta

€ 4.200 / año

Restaurante Vega

Sin POS actualmente, viene de hojas de cálculo.

en 2 días

Cualificado

Cadena Café Norte · 12 locales

Reunión cerrada para el martes con CFO.

€ 18.000 / año

Bodega Pérez · Q3

Propuesta

Olé Restaurantes · onboarding

€ 8.400 / año

Cerrado

Café Tuña · activo desde abr 26

<div style="display:flex;gap:14px;overflow-x:auto;height:540px;padding-bottom:8px;width:100%">
  <section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
    <header class="row" style="justify-content:space-between;padding:0 4px">
      <h4 class="title sm"><span class="dot info"></span> Nuevo</h4>
      <span class="chip sm">8</span>
    </header>
    <div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
      <article class="card interactive"><div class="body">
        <div class="row" style="gap:4px;margin-bottom:6px"><span class="chip info sm">Demo</span><span class="chip brand sm">Q2</span></div>
        <h5 class="title sm">Distribuidora Ibérica · catálogo Q2</h5>
        <p class="sub muted">Demo del módulo de inventario y compras antes del 28 de mayo.</p>
        <div class="row meta" style="gap:8px;margin-top:8px"><span>📅 28 may</span><span>💬 3</span></div>
      </div></article>
      <article class="card interactive"><div class="body"><h5 class="title sm">Panadería Marisol · 2 puntos de venta</h5><p class="meta">€ 4.200 / año</p></div></article>
      <article class="card interactive"><div class="body">
        <h5 class="title sm">Restaurante Vega</h5>
        <p class="sub muted">Sin POS actualmente, viene de hojas de cálculo.</p>
        <p class="meta"><span class="chip warn sm">en 2 días</span></p>
      </div></article>
    </div>
    <button class="btn ghost sm block">＋ Añadir tarjeta</button>
  </section>

  <section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
    <header class="row" style="justify-content:space-between;padding:0 4px">
      <h4 class="title sm"><span class="dot warn"></span> Cualificado</h4>
      <span class="chip sm">5</span>
    </header>
    <div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
      <article class="card interactive"><div class="body">
        <h5 class="title sm">Cadena Café Norte · 12 locales</h5>
        <p class="sub muted">Reunión cerrada para el martes con CFO.</p>
        <p class="meta">€ 18.000 / año</p>
      </div></article>
      <article class="card interactive elevated" style="opacity:0.7;transform:rotate(2deg)"><div class="body"><h5 class="title sm">Bodega Pérez · Q3</h5></div></article>
    </div>
    <button class="btn ghost sm block">＋ Añadir</button>
  </section>

  <section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
    <header class="row" style="justify-content:space-between;padding:0 4px">
      <h4 class="title sm"><span class="dot brand"></span> Propuesta</h4>
      <span class="chip sm">3</span>
    </header>
    <div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
      <article class="card interactive"><div class="body"><h5 class="title sm">Olé Restaurantes · onboarding</h5><p class="meta">€ 8.400 / año</p></div></article>
    </div>
    <button class="btn ghost sm block">＋ Añadir</button>
  </section>

  <section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
    <header class="row" style="justify-content:space-between;padding:0 4px">
      <h4 class="title sm"><span class="dot success"></span> Cerrado</h4>
      <span class="chip success sm">12</span>
    </header>
    <div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
      <article class="card interactive"><div class="body"><h5 class="title sm">Café Tuña · activo desde abr 26</h5></div></article>
    </div>
    <button class="btn ghost sm block">＋ Añadir</button>
  </section>
</div>

<div style="display:flex;gap:14px;overflow-x:auto;height:540px;padding-bottom:8px">

  <!-- Columna 1 -->
  <section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
    <header class="row" style="justify-content:space-between;padding:0 4px">
      <h4 class="title sm"><span class="dot info"></span> Nuevo</h4>
      <Chip size="sm">8</Chip>
    </header>
    <div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
      <Card interactive>
        <div class="body">
          <div class="row" style="gap:4px;margin-bottom:6px">
            <Chip color="info" size="sm">Demo</Chip>
            <Chip color="brand" size="sm">Q2</Chip>
          </div>
          <h5 class="title sm">Distribuidora Ibérica · catálogo Q2</h5>
          <p class="sub muted">Demo del módulo de inventario y compras antes del 28 de mayo.</p>
          <div class="row meta" style="gap:8px;margin-top:8px"><span>📅 28 may</span><span>💬 3</span></div>
        </div>
      </Card>
      <Card interactive>
        <div class="body">
          <h5 class="title sm">Panadería Marisol · 2 puntos de venta</h5>
          <p class="meta">€ 4.200 / año</p>
        </div>
      </Card>
      <Card interactive>
        <div class="body">
          <h5 class="title sm">Restaurante Vega</h5>
          <p class="sub muted">Sin POS actualmente, viene de hojas de cálculo.</p>
          <p class="meta"><Chip color="warn" size="sm">en 2 días</Chip></p>
        </div>
      </Card>
    </div>
    <Button label="＋ Añadir tarjeta" variant="ghost" size="sm" block />
  </section>

  <!-- Columna 2 -->
  <section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
    <header class="row" style="justify-content:space-between;padding:0 4px">
      <h4 class="title sm"><span class="dot warn"></span> Cualificado</h4>
      <Chip size="sm">5</Chip>
    </header>
    <div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
      <Card interactive>
        <div class="body">
          <h5 class="title sm">Cadena Café Norte · 12 locales</h5>
          <p class="sub muted">Reunión cerrada para el martes con CFO.</p>
          <p class="meta">€ 18.000 / año</p>
        </div>
      </Card>
      <Card interactive attrs={"class": "elevated", "style": "opacity:0.7;transform:rotate(2deg)"}>
        <div class="body"><h5 class="title sm">Bodega Pérez · Q3</h5></div>
      </Card>
    </div>
    <Button label="＋ Añadir" variant="ghost" size="sm" block />
  </section>

  <!-- Columna 3 -->
  <section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
    <header class="row" style="justify-content:space-between;padding:0 4px">
      <h4 class="title sm"><span class="dot brand"></span> Propuesta</h4>
      <Chip size="sm">3</Chip>
    </header>
    <div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
      <Card interactive>
        <div class="body">
          <h5 class="title sm">Olé Restaurantes · onboarding</h5>
          <p class="meta">€ 8.400 / año</p>
        </div>
      </Card>
    </div>
    <Button label="＋ Añadir" variant="ghost" size="sm" block />
  </section>

  <!-- Columna 4 -->
  <section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
    <header class="row" style="justify-content:space-between;padding:0 4px">
      <h4 class="title sm"><span class="dot success"></span> Cerrado</h4>
      <Chip color="success" size="sm">12</Chip>
    </header>
    <div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
      <Card interactive>
        <div class="body"><h5 class="title sm">Café Tuña · activo desde abr 26</h5></div>
      </Card>
    </div>
    <Button label="＋ Añadir" variant="ghost" size="sm" block />
  </section>

</div>

<div style="display:flex;gap:14px;overflow-x:auto;height:540px;padding-bottom:8px">

  <!-- Columna 1 -->
  <section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
    <header class="row" style="justify-content:space-between;padding:0 4px">
      <h4 class="title sm"><span class="dot info"></span> Nuevo</h4>
      <Chip size="sm">8</Chip>
    </header>
    <div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
      <Card interactive>
        <div class="body">
          <div class="row" style="gap:4px;margin-bottom:6px">
            <Chip color="info" size="sm">Demo</Chip>
            <Chip color="brand" size="sm">Q2</Chip>
          </div>
          <h5 class="title sm">Distribuidora Ibérica · catálogo Q2</h5>
          <p class="sub muted">Demo del módulo de inventario y compras antes del 28 de mayo.</p>
          <div class="row meta" style="gap:8px;margin-top:8px"><span>📅 28 may</span><span>💬 3</span></div>
        </div>
      </Card>
      <Card interactive>
        <div class="body">
          <h5 class="title sm">Panadería Marisol · 2 puntos de venta</h5>
          <p class="meta">€ 4.200 / año</p>
        </div>
      </Card>
      <Card interactive>
        <div class="body">
          <h5 class="title sm">Restaurante Vega</h5>
          <p class="sub muted">Sin POS actualmente, viene de hojas de cálculo.</p>
          <p class="meta"><Chip color="warn" size="sm">en 2 días</Chip></p>
        </div>
      </Card>
    </div>
    <Button label="＋ Añadir tarjeta" variant="ghost" size="sm" block />
  </section>

  <!-- Columna 2 -->
  <section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
    <header class="row" style="justify-content:space-between;padding:0 4px">
      <h4 class="title sm"><span class="dot warn"></span> Cualificado</h4>
      <Chip size="sm">5</Chip>
    </header>
    <div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
      <Card interactive>
        <div class="body">
          <h5 class="title sm">Cadena Café Norte · 12 locales</h5>
          <p class="sub muted">Reunión cerrada para el martes con CFO.</p>
          <p class="meta">€ 18.000 / año</p>
        </div>
      </Card>
      <Card interactive attrs={"class": "elevated", "style": "opacity:0.7;transform:rotate(2deg)"}>
        <div class="body"><h5 class="title sm">Bodega Pérez · Q3</h5></div>
      </Card>
    </div>
    <Button label="＋ Añadir" variant="ghost" size="sm" block />
  </section>

  <!-- Columna 3 -->
  <section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
    <header class="row" style="justify-content:space-between;padding:0 4px">
      <h4 class="title sm"><span class="dot brand"></span> Propuesta</h4>
      <Chip size="sm">3</Chip>
    </header>
    <div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
      <Card interactive>
        <div class="body">
          <h5 class="title sm">Olé Restaurantes · onboarding</h5>
          <p class="meta">€ 8.400 / año</p>
        </div>
      </Card>
    </div>
    <Button label="＋ Añadir" variant="ghost" size="sm" block />
  </section>

  <!-- Columna 4 -->
  <section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
    <header class="row" style="justify-content:space-between;padding:0 4px">
      <h4 class="title sm"><span class="dot success"></span> Cerrado</h4>
      <Chip color="success" size="sm">12</Chip>
    </header>
    <div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
      <Card interactive>
        <div class="body"><h5 class="title sm">Café Tuña · activo desde abr 26</h5></div>
      </Card>
    </div>
    <Button label="＋ Añadir" variant="ghost" size="sm" block />
  </section>

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