Card de "beneficio destacado" — gradiente sutil + CTA centrado. Pensado para llamadas a la acción únicas y prominentes. Construido a partir de primitivos: no existe ningún componente BenefitCard en OutfitKit. Copia la composición a tu proyecto, o consulta el ejemplo completo en examples/cards/benefit-card.html.
Composición:Card con las utilidades .layout.narrow.text-center.spacious + opcional .gradient.brand / .filled. Dentro: .title, .sub y Button en .actions.center.
Default · gradient brand-soft
<aside class="card layout narrow text-center spacious gradient brand">
<header class="head"><h3 class="title">Empieza gratis durante 30 días</h3></header>
<div class="body"><p class="sub">Sin tarjeta de crédito. Cancela cuando quieras. Setup en menos de 5 minutos.</p></div>
<footer class="foot actions center"><a class="btn brand" href="#">Crear cuenta</a></footer>
</aside>
<Card tag="aside" attrs={"class": "layout narrow text-center spacious gradient brand"}>
<header class="head"><h3 class="title">Empieza gratis durante 30 días</h3></header>
<div class="body"><p class="sub">Sin tarjeta de crédito. Cancela cuando quieras. Setup en menos de 5 minutos.</p></div>
<footer class="foot actions center">
<Button label="Crear cuenta" variant="brand" href="#" />
</footer>
</Card>
<Card tag="aside" attrs={"class": "layout narrow text-center spacious gradient brand"}>
<header class="head"><h3 class="title">Empieza gratis durante 30 días</h3></header>
<div class="body"><p class="sub">Sin tarjeta de crédito. Cancela cuando quieras. Setup en menos de 5 minutos.</p></div>
<footer class="foot actions center">
<Button label="Crear cuenta" variant="brand" href="#" />
</footer>
</Card>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
gradient=info · sin CTA
<aside class="card layout narrow text-center spacious gradient info">
<header class="head"><h3 class="title">Nuevo: API webhook</h3></header>
<div class="body"><p class="sub">Suscríbete a eventos en tiempo real. Disponible para todos los planes.</p></div>
</aside>
<Card tag="aside" attrs={"class": "layout narrow text-center spacious gradient info"}>
<header class="head"><h3 class="title">Nuevo: API webhook</h3></header>
<div class="body"><p class="sub">Suscríbete a eventos en tiempo real. Disponible para todos los planes.</p></div>
</Card>
<Card tag="aside" attrs={"class": "layout narrow text-center spacious gradient info"}>
<header class="head"><h3 class="title">Nuevo: API webhook</h3></header>
<div class="body"><p class="sub">Suscríbete a eventos en tiempo real. Disponible para todos los planes.</p></div>
</Card>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}