Grid
Distribuye las cards en columnas consistentes según el viewport.
Cards Pattern
Las cards organizan contenido modular en bloques repetibles. Este patrón muestra cómo construirlas de forma consistente y escalable con el framework.
Qué resuelve este patrón
Las cards permiten presentar piezas de contenido relacionadas sin romper la estructura general de la página. Funcionan bien para servicios, artículos, módulos informativos, features o recursos.
Este patrón no necesita una “card” especial del framework. Se construye a partir de grid, stack, spacing, radius, typography y helpers de ancho o visibilidad cuando hace falta.
Módulos que intervienen
Stack
Organiza internamente meta, título, texto y acciones dentro de cada card.
Spacing
Resuelve padding interno y ajustes puntuales del módulo.
Radius
Define la forma del bloque y mantiene consistencia visual entre cards.
Typography
Establece jerarquía clara entre título, apoyo y metadatos.
Width
Puede ayudar a controlar grupos o variantes editoriales más contenidas.
Ejemplo visual del patrón
Card Title
Una card modular con jerarquía clara, texto breve y un cierre simple.
Learn moreCard Title
El mismo patrón se repite sin romper consistencia en spacing ni estructura.
Learn moreCard Title
La grid permite escalar este bloque con facilidad a distintas resoluciones.
Learn moreCódigo base del patrón
<section class="section section-md">
<div class="container container-xl">
<div class="grid cols-1 md:cols-2 lg:cols-3 gap-md">
<article class="rounded-lg p-4 stack stack-md">
<p class="meta ls-sm">Module 01</p>
<h3 class="title fnt-uppercase">Card Title</h3>
<p>Texto de apoyo del bloque.</p>
<a href="#" class="fnt-uppercase">Learn more</a>
</article>
</div>
</div>
</section>Variantes comunes
Feature Card
Útil para beneficios, capacidades o diferenciadores.
Article Card
Ideal para recursos, posts o bloques de lectura breve.
Service Card
Presenta servicios o módulos de oferta de manera modular.
Data Card
Puede adaptarse para métricas, KPIs o paneles resumidos.
Decisiones clave del patrón
- La card debe tener un ritmo interno claro, por eso usa stack.
- La repetición debe depender de grid, no de márgenes manuales.
- El padding debe ser consistente entre variantes del patrón.
- La curvatura debe repetirse con un solo nivel de radius dominante.
- El contenido debe ser breve, escaneable y jerárquico.
Qué evitar en este patrón
Cards con demasiado contenido
Cuando una card contiene demasiado texto, deja de funcionar como módulo escaneable.
Alturas forzadas sin razón
No igualar visualmente las cards a costa de romper su contenido natural.
Muchos radios y paddings distintos
La consistencia visual se pierde cuando cada card se comporta diferente.
Grid improvisada
Evita construir grupos de cards con márgenes manuales en vez de usar grid.
Siguiente paso
Continúa con pattern article para revisar un patrón editorial construido con el sistema.