Module card — OutfitKit

Module card

Card de módulo / producto para marketplaces y catálogos: icono + título + meta (autor) + descripción + footer con precio. Construido a partir de primitivos: no existe ningún componente ModuleCard en OutfitKit. Copia la composición a tu proyecto, o consulta el ejemplo completo en examples/cards/module-card.html.

Composición: <a class="card layout interactive"> con header (.icon-box + .heading > .title/.meta.mono), body (.sub.muted) y footer (.value.leaf).

3 módulos en grid (marketplace)

POS & Sales

@erplora

Invoicing, receipts, returns. Modulo certificado AEAT.

Inventory

@erplora

Almacenes, traspasos y conteo cíclico con código de barras.

Analytics Pro

@datasense

Dashboards customizables con conectores a Google Analytics, Stripe y Shopify.

<div class="grid-3">
  <a class="card layout interactive" href="#">
    <header class="head">
      <span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:shopping-cart"></iconify-icon></span>
      <div class="heading"><h3 class="title">POS &amp; Sales</h3><span class="meta mono">@erplora</span></div>
    </header>
    <div class="body"><p class="sub muted">Invoicing, receipts, returns. Modulo certificado AEAT.</p></div>
    <footer class="foot"><span class="value leaf">29 €/mes</span></footer>
  </a>
  <a class="card layout interactive" href="#">
    <header class="head">
      <span class="icon-box success" aria-hidden="true"><iconify-icon icon="lucide:package"></iconify-icon></span>
      <div class="heading"><h3 class="title">Inventory</h3><span class="meta mono">@erplora</span></div>
    </header>
    <div class="body"><p class="sub muted">Almacenes, traspasos y conteo cíclico con código de barras.</p></div>
    <footer class="foot"><span class="value leaf">Gratis</span></footer>
  </a>
  <a class="card layout interactive" href="#">
    <header class="head">
      <span class="icon-box warn" aria-hidden="true"><iconify-icon icon="lucide:bar-chart-3"></iconify-icon></span>
      <div class="heading"><h3 class="title">Analytics Pro</h3><span class="meta mono">@datasense</span></div>
    </header>
    <div class="body"><p class="sub muted">Dashboards customizables con conectores a Google Analytics, Stripe y Shopify.</p></div>
    <footer class="foot"><span class="value leaf">19 €/mes</span></footer>
  </a>
</div>

<Grid cols="3">
  <a class="card layout interactive" href="#">
    <header class="head">
      <span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:shopping-cart"></iconify-icon></span>
      <div class="heading">
        <h3 class="title">POS &amp; Sales</h3>
        <span class="meta mono">@erplora</span>
      </div>
    </header>
    <div class="body"><p class="sub muted">Invoicing, receipts, returns. Modulo certificado AEAT.</p></div>
    <footer class="foot"><span class="value leaf">29 €/mes</span></footer>
  </a>

  <a class="card layout interactive" href="#">
    <header class="head">
      <span class="icon-box success" aria-hidden="true"><iconify-icon icon="lucide:package"></iconify-icon></span>
      <div class="heading">
        <h3 class="title">Inventory</h3>
        <span class="meta mono">@erplora</span>
      </div>
    </header>
    <div class="body"><p class="sub muted">Almacenes, traspasos y conteo cíclico con código de barras.</p></div>
    <footer class="foot"><span class="value leaf">Gratis</span></footer>
  </a>

  <a class="card layout interactive" href="#">
    <header class="head">
      <span class="icon-box warn" aria-hidden="true"><iconify-icon icon="lucide:bar-chart-3"></iconify-icon></span>
      <div class="heading">
        <h3 class="title">Analytics Pro</h3>
        <span class="meta mono">@datasense</span>
      </div>
    </header>
    <div class="body"><p class="sub muted">Dashboards customizables con conectores a Google Analytics, Stripe y Shopify.</p></div>
    <footer class="foot"><span class="value leaf">19 €/mes</span></footer>
  </a>
</Grid>

<Grid cols="3">
  <a class="card layout interactive" href="#">
    <header class="head">
      <span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:shopping-cart"></iconify-icon></span>
      <div class="heading">
        <h3 class="title">POS &amp; Sales</h3>
        <span class="meta mono">@erplora</span>
      </div>
    </header>
    <div class="body"><p class="sub muted">Invoicing, receipts, returns. Modulo certificado AEAT.</p></div>
    <footer class="foot"><span class="value leaf">29 €/mes</span></footer>
  </a>

  <a class="card layout interactive" href="#">
    <header class="head">
      <span class="icon-box success" aria-hidden="true"><iconify-icon icon="lucide:package"></iconify-icon></span>
      <div class="heading">
        <h3 class="title">Inventory</h3>
        <span class="meta mono">@erplora</span>
      </div>
    </header>
    <div class="body"><p class="sub muted">Almacenes, traspasos y conteo cíclico con código de barras.</p></div>
    <footer class="foot"><span class="value leaf">Gratis</span></footer>
  </a>

  <a class="card layout interactive" href="#">
    <header class="head">
      <span class="icon-box warn" aria-hidden="true"><iconify-icon icon="lucide:bar-chart-3"></iconify-icon></span>
      <div class="heading">
        <h3 class="title">Analytics Pro</h3>
        <span class="meta mono">@datasense</span>
      </div>
    </header>
    <div class="body"><p class="sub muted">Dashboards customizables con conectores a Google Analytics, Stripe y Shopify.</p></div>
    <footer class="foot"><span class="value leaf">19 €/mes</span></footer>
  </a>
</Grid>

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

Modificadores útiles

.interactive sobre <a class="card"> activa el hover-state
.icon-box · .icon-box.success · .icon-box.warn · .icon-box.danger — kind del icono
.meta.mono — subtítulo monoespaciado (autor / versión)
.value.leaf — color semántico para precio (también .brand, .warn…)