Timeline

Bitácora vertical con bullets coloreados y línea de conexión. Construido a partir de primitivos: no existe ningún componente Timeline en OutfitKit. Es composición de un Card + lista vertical de items con .dot (bullet) + texto + border-left que actúa como spine. Consulta el ejemplo completo en examples/mini-apps/timeline.html.

Composición: Card + <ul> sin estilo de bullets + cada <li> con border-left + .dot absolutamente posicionado (variantes .brand, .success, .info, .warn, .danger) + .heading con .title.sm + .meta para la hora.

Bitácora · pedido 2041

Lucía P. creó el pedido
14:02

3 productos · €34,50 · Mesa 4
Enviado a cocina
14:03
Listo para servir
14:18
Servido y cobrado · efectivo
14:32

Vuelta de €5,50 entregada al cliente.

<div class="card" style="max-width:500px;width:100%">
  <div class="body">
    <ul style="list-style:none;padding:0;margin:0">
      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot brand" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline"><h5 class="title sm"><b>Lucía P.</b> creó el pedido</h5><span class="meta">14:02</span></div>
        <p class="meta">3 productos · €34,50 · Mesa 4</p>
      </li>
      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot info" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline"><h5 class="title sm">Enviado a cocina</h5><span class="meta">14:03</span></div>
      </li>
      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot warn" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline"><h5 class="title sm">Listo para servir</h5><span class="meta">14:18</span></div>
      </li>
      <li style="position:relative;padding-left:24px;border-left:2px solid transparent;margin-left:6px">
        <span class="dot success" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline"><h5 class="title sm">Servido y cobrado · efectivo</h5><span class="meta">14:32</span></div>
        <p class="meta">Vuelta de €5,50 entregada al cliente.</p>
      </li>
    </ul>
  </div>
</div>

<Card>
  <div class="body">
    <ul style="list-style:none;padding:0;margin:0">

      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot brand" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline">
          <h5 class="title sm"><b>Lucía P.</b> creó el pedido</h5>
          <span class="meta">14:02</span>
        </div>
        <p class="meta">3 productos · €34,50 · Mesa 4</p>
      </li>

      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot info" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline">
          <h5 class="title sm">Enviado a cocina</h5>
          <span class="meta">14:03</span>
        </div>
      </li>

      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot warn" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline">
          <h5 class="title sm">Listo para servir</h5>
          <span class="meta">14:18</span>
        </div>
      </li>

      <li style="position:relative;padding-left:24px;border-left:2px solid transparent;margin-left:6px">
        <span class="dot success" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline">
          <h5 class="title sm">Servido y cobrado · efectivo</h5>
          <span class="meta">14:32</span>
        </div>
        <p class="meta">Vuelta de €5,50 entregada al cliente.</p>
      </li>

    </ul>
  </div>
</Card>

<Card>
  <div class="body">
    <ul style="list-style:none;padding:0;margin:0">

      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot brand" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline">
          <h5 class="title sm"><b>Lucía P.</b> creó el pedido</h5>
          <span class="meta">14:02</span>
        </div>
        <p class="meta">3 productos · €34,50 · Mesa 4</p>
      </li>

      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot info" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline">
          <h5 class="title sm">Enviado a cocina</h5>
          <span class="meta">14:03</span>
        </div>
      </li>

      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot warn" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline">
          <h5 class="title sm">Listo para servir</h5>
          <span class="meta">14:18</span>
        </div>
      </li>

      <li style="position:relative;padding-left:24px;border-left:2px solid transparent;margin-left:6px">
        <span class="dot success" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline">
          <h5 class="title sm">Servido y cobrado · efectivo</h5>
          <span class="meta">14:32</span>
        </div>
        <p class="meta">Vuelta de €5,50 entregada al cliente.</p>
      </li>

    </ul>
  </div>
</Card>

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

Changelog vertical

v1.4.0 publicado
hoy · 09:14

Nuevos primitivos: Alert, Loading, SkeletonText.
v1.3.0 publicado
hace 2 sem.

Slim-down: 18 templates "opinionated" movidos a examples/.
v1.2.0 publicado
hace 1 mes

<div class="card" style="max-width:500px;width:100%">
  <div class="body">
    <ul style="list-style:none;padding:0;margin:0">
      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot success" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline"><h5 class="title sm">v1.4.0 publicado</h5><span class="meta">hoy · 09:14</span></div>
        <p class="meta">Nuevos primitivos: <code>Alert</code>, <code>Loading</code>, <code>SkeletonText</code>.</p>
      </li>
      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot brand" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline"><h5 class="title sm">v1.3.0 publicado</h5><span class="meta">hace 2 sem.</span></div>
        <p class="meta">Slim-down: 18 templates "opinionated" movidos a <code>examples/</code>.</p>
      </li>
      <li style="position:relative;padding-left:24px;border-left:2px solid transparent;margin-left:6px">
        <span class="dot info" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline"><h5 class="title sm">v1.2.0 publicado</h5><span class="meta">hace 1 mes</span></div>
      </li>
    </ul>
  </div>
</div>

<Card>
  <div class="body">
    <ul style="list-style:none;padding:0;margin:0">
      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot success" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline">
          <h5 class="title sm">v1.4.0 publicado</h5>
          <span class="meta">hoy · 09:14</span>
        </div>
        <p class="meta">Nuevos primitivos: <code>Alert</code>, <code>Loading</code>, <code>SkeletonText</code>.</p>
      </li>
      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot brand" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline">
          <h5 class="title sm">v1.3.0 publicado</h5>
          <span class="meta">hace 2 sem.</span>
        </div>
        <p class="meta">Slim-down: 18 templates "opinionated" movidos a <code>examples/</code>.</p>
      </li>
      <li style="position:relative;padding-left:24px;border-left:2px solid transparent;margin-left:6px">
        <span class="dot info" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline">
          <h5 class="title sm">v1.2.0 publicado</h5>
          <span class="meta">hace 1 mes</span>
        </div>
      </li>
    </ul>
  </div>
</Card>

<Card>
  <div class="body">
    <ul style="list-style:none;padding:0;margin:0">
      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot success" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline">
          <h5 class="title sm">v1.4.0 publicado</h5>
          <span class="meta">hoy · 09:14</span>
        </div>
        <p class="meta">Nuevos primitivos: <code>Alert</code>, <code>Loading</code>, <code>SkeletonText</code>.</p>
      </li>
      <li style="position:relative;padding-left:24px;padding-bottom:16px;border-left:2px solid var(--line);margin-left:6px">
        <span class="dot brand" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline">
          <h5 class="title sm">v1.3.0 publicado</h5>
          <span class="meta">hace 2 sem.</span>
        </div>
        <p class="meta">Slim-down: 18 templates "opinionated" movidos a <code>examples/</code>.</p>
      </li>
      <li style="position:relative;padding-left:24px;border-left:2px solid transparent;margin-left:6px">
        <span class="dot info" style="position:absolute;left:-7px;top:4px;width:12px;height:12px"></span>
        <div class="row" style="justify-content:space-between;align-items:baseline">
          <h5 class="title sm">v1.2.0 publicado</h5>
          <span class="meta">hace 1 mes</span>
        </div>
      </li>
    </ul>
  </div>
</Card>

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

Timeline — OutfitKit

Timeline

Bitácora · pedido 2041

Lucía P. creó el pedido

Enviado a cocina

Listo para servir

Servido y cobrado · efectivo

Changelog vertical

v1.4.0 publicado

v1.3.0 publicado

v1.2.0 publicado