Pricing card — OutfitKit

Pricing card

Card de plan / tier para pricing tables. Construido a partir de primitivos — no existe ningún componente PricingCard en OutfitKit. Copia la composición a tu proyecto, o consulta el ejemplo completo en examples/cards/pricing-card.html.

Composición: Card + Chip (badge) + lista .check-list + Button block. La variante featured se consigue con la clase utilitaria .ring.

3 planes con featured

Starter

0 €/mes

1 hub
2 GB storage
Email support

Recomendado

Pro

29 €/mes

5 hubs
50 GB storage
Priority support 24/5
Custom domain

Enterprise

Custom/quote

Hubs ilimitados
SSO + audit logs
Dedicated CSM
SLA 99.95%

<div class="grid-3 center-wide">
  <article class="card">
    <header class="head text-center">
      <h3 class="title lg">Starter</h3>
    </header>
    <div class="body text-center">
      <div class="flex" style="justify-content:center;align-items:baseline;gap:6px">
        <span class="value 2xl">0 €</span><span class="meta">/mes</span>
      </div>
      <ul class="check-list">
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> 1 hub</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> 2 GB storage</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Email support</li>
      </ul>
    </div>
    <footer class="foot">
      <a class="btn outline block" href="#">Empezar gratis</a>
    </footer>
  </article>

  <article class="card ring" style="position:relative">
    <span class="chip brand badge-top">Recomendado</span>
    <header class="head text-center">
      <h3 class="title lg">Pro</h3>
    </header>
    <div class="body text-center">
      <div class="flex" style="justify-content:center;align-items:baseline;gap:6px">
        <span class="value 2xl">29 €</span><span class="meta">/mes</span>
      </div>
      <ul class="check-list">
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> 5 hubs</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> 50 GB storage</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Priority support 24/5</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Custom domain</li>
      </ul>
    </div>
    <footer class="foot">
      <a class="btn brand block" href="#">Empezar trial · 14 días</a>
    </footer>
  </article>

  <article class="card">
    <header class="head text-center">
      <h3 class="title lg">Enterprise</h3>
    </header>
    <div class="body text-center">
      <div class="flex" style="justify-content:center;align-items:baseline;gap:6px">
        <span class="value 2xl">Custom</span><span class="meta">/quote</span>
      </div>
      <ul class="check-list">
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Hubs ilimitados</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> SSO + audit logs</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Dedicated CSM</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> SLA 99.95%</li>
      </ul>
    </div>
    <footer class="foot">
      <a class="btn outline block" href="#">Contactar ventas</a>
    </footer>
  </article>
</div>

<div class="grid-3 center-wide">
  <Card>
    <header class="head text-center">
      <h3 class="title lg">Starter</h3>
    </header>
    <div class="body text-center">
      <div class="flex" style="justify-content:center;align-items:baseline;gap:6px">
        <span class="value 2xl">0 €</span><span class="meta">/mes</span>
      </div>
      <ul class="check-list">
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> 1 hub</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> 2 GB storage</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Email support</li>
      </ul>
    </div>
    <footer class="foot">
      <Button label="Empezar gratis" variant="outline" block />
    </footer>
  </Card>

  <Card attrs={"class": "ring", "style": "position:relative"}>
    <Chip color="brand" attrs={"class": "badge-top"}>Recomendado</Chip>
    <header class="head text-center">
      <h3 class="title lg">Pro</h3>
    </header>
    <div class="body text-center">
      <div class="flex" style="justify-content:center;align-items:baseline;gap:6px">
        <span class="value 2xl">29 €</span><span class="meta">/mes</span>
      </div>
      <ul class="check-list">
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> 5 hubs</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> 50 GB storage</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Priority support 24/5</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Custom domain</li>
      </ul>
    </div>
    <footer class="foot">
      <Button label="Empezar trial · 14 días" variant="brand" block />
    </footer>
  </Card>

  <Card>
    <header class="head text-center">
      <h3 class="title lg">Enterprise</h3>
    </header>
    <div class="body text-center">
      <div class="flex" style="justify-content:center;align-items:baseline;gap:6px">
        <span class="value 2xl">Custom</span><span class="meta">/quote</span>
      </div>
      <ul class="check-list">
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Hubs ilimitados</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> SSO + audit logs</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Dedicated CSM</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> SLA 99.95%</li>
      </ul>
    </div>
    <footer class="foot">
      <Button label="Contactar ventas" variant="outline" block />
    </footer>
  </Card>
</div>

<div class="grid-3 center-wide">
  <Card>
    <header class="head text-center">
      <h3 class="title lg">Starter</h3>
    </header>
    <div class="body text-center">
      <div class="flex" style="justify-content:center;align-items:baseline;gap:6px">
        <span class="value 2xl">0 €</span><span class="meta">/mes</span>
      </div>
      <ul class="check-list">
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> 1 hub</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> 2 GB storage</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Email support</li>
      </ul>
    </div>
    <footer class="foot">
      <Button label="Empezar gratis" variant="outline" block />
    </footer>
  </Card>

  <Card attrs={"class": "ring", "style": "position:relative"}>
    <Chip color="brand" attrs={"class": "badge-top"}>Recomendado</Chip>
    <header class="head text-center">
      <h3 class="title lg">Pro</h3>
    </header>
    <div class="body text-center">
      <div class="flex" style="justify-content:center;align-items:baseline;gap:6px">
        <span class="value 2xl">29 €</span><span class="meta">/mes</span>
      </div>
      <ul class="check-list">
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> 5 hubs</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> 50 GB storage</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Priority support 24/5</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Custom domain</li>
      </ul>
    </div>
    <footer class="foot">
      <Button label="Empezar trial · 14 días" variant="brand" block />
    </footer>
  </Card>

  <Card>
    <header class="head text-center">
      <h3 class="title lg">Enterprise</h3>
    </header>
    <div class="body text-center">
      <div class="flex" style="justify-content:center;align-items:baseline;gap:6px">
        <span class="value 2xl">Custom</span><span class="meta">/quote</span>
      </div>
      <ul class="check-list">
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Hubs ilimitados</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> SSO + audit logs</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> Dedicated CSM</li>
        <li><iconify-icon icon="lucide:check" width="16"></iconify-icon> SLA 99.95%</li>
      </ul>
    </div>
    <footer class="foot">
      <Button label="Contactar ventas" variant="outline" block />
    </footer>
  </Card>
</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 ... />

Modificadores útiles

.ring — borde + glow del brand para resaltar el plan recomendado
.badge-top — pill destacado en la esquina superior
.check-list — lista con checks alineados
.text-center · .value.2xl · .meta — tipografía coordinada