Feature card — OutfitKit

Feature card

Patrón "feature/module card" para landings, marketplaces y secciones de marketing — icono cuadrado + título + descripción corta. Construido a partir de primitivos: no existe ningún componente FeatureCard en OutfitKit. Copia la composición a tu proyecto, o consulta el ejemplo completo en examples/cards/feature-card.html.

Composición: Card con .layout.compact.text-center + .icon-box en el header + .title / .sub.muted. El .icon-box es una clase universal reusable.

Categorías de módulos (landing)

POS & Sales

Invoicing, receipts, returns

Inventory

Warehouses, transfers, stocktake

Customers

Loyalty programs, rewards

Fiscal

Verifactu, SII compliance

<div class="grid-4 center-wide">
  <article class="card layout compact text-center">
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:shopping-cart"></iconify-icon></span></header>
    <div class="body"><h3 class="title">POS &amp; Sales</h3><p class="sub muted">Invoicing, receipts, returns</p></div>
  </article>
  <article class="card layout compact text-center">
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:package"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Inventory</h3><p class="sub muted">Warehouses, transfers, stocktake</p></div>
  </article>
  <article class="card layout compact text-center">
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:users"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Customers</h3><p class="sub muted">Loyalty programs, rewards</p></div>
  </article>
  <article class="card layout compact text-center">
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:file-text"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Fiscal</h3><p class="sub muted">Verifactu, SII compliance</p></div>
  </article>
</div>

<Grid cols="4">
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head">
      <span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:shopping-cart"></iconify-icon></span>
    </header>
    <div class="body">
      <h3 class="title">POS &amp; Sales</h3>
      <p class="sub muted">Invoicing, receipts, returns</p>
    </div>
  </Card>
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head">
      <span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:package"></iconify-icon></span>
    </header>
    <div class="body">
      <h3 class="title">Inventory</h3>
      <p class="sub muted">Warehouses, transfers, stocktake</p>
    </div>
  </Card>
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head">
      <span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:users"></iconify-icon></span>
    </header>
    <div class="body">
      <h3 class="title">Customers</h3>
      <p class="sub muted">Loyalty programs, rewards</p>
    </div>
  </Card>
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head">
      <span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:file-text"></iconify-icon></span>
    </header>
    <div class="body">
      <h3 class="title">Fiscal</h3>
      <p class="sub muted">Verifactu, SII compliance</p>
    </div>
  </Card>
</Grid>

<Grid cols="4">
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head">
      <span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:shopping-cart"></iconify-icon></span>
    </header>
    <div class="body">
      <h3 class="title">POS &amp; Sales</h3>
      <p class="sub muted">Invoicing, receipts, returns</p>
    </div>
  </Card>
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head">
      <span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:package"></iconify-icon></span>
    </header>
    <div class="body">
      <h3 class="title">Inventory</h3>
      <p class="sub muted">Warehouses, transfers, stocktake</p>
    </div>
  </Card>
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head">
      <span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:users"></iconify-icon></span>
    </header>
    <div class="body">
      <h3 class="title">Customers</h3>
      <p class="sub muted">Loyalty programs, rewards</p>
    </div>
  </Card>
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head">
      <span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:file-text"></iconify-icon></span>
    </header>
    <div class="body">
      <h3 class="title">Fiscal</h3>
      <p class="sub muted">Verifactu, SII compliance</p>
    </div>
  </Card>
</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 ... />

Variante interactiva (cada card es )

HR & Payroll

Employees, attendance, payroll

Accounting

Ledger, tax reports

Analytics

Reports, KPIs, dashboards

<div class="grid-3 center-wide">
  <a class="card layout compact text-center interactive" href="/modules/hr">
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:user-cog"></iconify-icon></span></header>
    <div class="body"><h3 class="title">HR &amp; Payroll</h3><p class="sub muted">Employees, attendance, payroll</p></div>
  </a>
  <a class="card layout compact text-center interactive" href="/modules/accounting">
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:calculator"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Accounting</h3><p class="sub muted">Ledger, tax reports</p></div>
  </a>
  <a class="card layout compact text-center interactive" href="/modules/analytics">
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:bar-chart-3"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Analytics</h3><p class="sub muted">Reports, KPIs, dashboards</p></div>
  </a>
</div>

<Grid cols="3">
  <a class="card layout compact text-center interactive" href="/modules/hr">
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:user-cog"></iconify-icon></span></header>
    <div class="body"><h3 class="title">HR &amp; Payroll</h3><p class="sub muted">Employees, attendance, payroll</p></div>
  </a>
  <a class="card layout compact text-center interactive" href="/modules/accounting">
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:calculator"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Accounting</h3><p class="sub muted">Ledger, tax reports</p></div>
  </a>
  <a class="card layout compact text-center interactive" href="/modules/analytics">
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:bar-chart-3"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Analytics</h3><p class="sub muted">Reports, KPIs, dashboards</p></div>
  </a>
</Grid>

<Grid cols="3">
  <a class="card layout compact text-center interactive" href="/modules/hr">
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:user-cog"></iconify-icon></span></header>
    <div class="body"><h3 class="title">HR &amp; Payroll</h3><p class="sub muted">Employees, attendance, payroll</p></div>
  </a>
  <a class="card layout compact text-center interactive" href="/modules/accounting">
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:calculator"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Accounting</h3><p class="sub muted">Ledger, tax reports</p></div>
  </a>
  <a class="card layout compact text-center interactive" href="/modules/analytics">
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:bar-chart-3"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Analytics</h3><p class="sub muted">Reports, KPIs, dashboards</p></div>
  </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 ... />

Icon-box · variantes semánticas

Brand

(default)

Success

.success

Warn

.warn

Danger

.danger

<div class="grid-4">
  <article class="card layout compact text-center">
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:zap"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Brand</h3><p class="sub muted">(default)</p></div>
  </article>
  <article class="card layout compact text-center">
    <header class="head"><span class="icon-box success" aria-hidden="true"><iconify-icon icon="lucide:check"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Success</h3><p class="sub muted">.success</p></div>
  </article>
  <article class="card layout compact text-center">
    <header class="head"><span class="icon-box warn" aria-hidden="true"><iconify-icon icon="lucide:alert-triangle"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Warn</h3><p class="sub muted">.warn</p></div>
  </article>
  <article class="card layout compact text-center">
    <header class="head"><span class="icon-box danger" aria-hidden="true"><iconify-icon icon="lucide:x-circle"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Danger</h3><p class="sub muted">.danger</p></div>
  </article>
</div>

<Grid cols="4">
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:zap"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Brand</h3><p class="sub muted">(default)</p></div>
  </Card>
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head"><span class="icon-box success" aria-hidden="true"><iconify-icon icon="lucide:check"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Success</h3><p class="sub muted">.success</p></div>
  </Card>
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head"><span class="icon-box warn" aria-hidden="true"><iconify-icon icon="lucide:alert-triangle"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Warn</h3><p class="sub muted">.warn</p></div>
  </Card>
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head"><span class="icon-box danger" aria-hidden="true"><iconify-icon icon="lucide:x-circle"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Danger</h3><p class="sub muted">.danger</p></div>
  </Card>
</Grid>

<Grid cols="4">
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head"><span class="icon-box" aria-hidden="true"><iconify-icon icon="lucide:zap"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Brand</h3><p class="sub muted">(default)</p></div>
  </Card>
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head"><span class="icon-box success" aria-hidden="true"><iconify-icon icon="lucide:check"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Success</h3><p class="sub muted">.success</p></div>
  </Card>
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head"><span class="icon-box warn" aria-hidden="true"><iconify-icon icon="lucide:alert-triangle"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Warn</h3><p class="sub muted">.warn</p></div>
  </Card>
  <Card attrs={"class": "layout compact text-center"}>
    <header class="head"><span class="icon-box danger" aria-hidden="true"><iconify-icon icon="lucide:x-circle"></iconify-icon></span></header>
    <div class="body"><h3 class="title">Danger</h3><p class="sub muted">.danger</p></div>
  </Card>
</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 ... />

Icon-box standalone

El .icon-box también vive fuera de las cards — para nav items, list items, stats, etc.