Componentes · Presentación
Card (tarjetas de contenido)
Agrupa información relacionada en una superficie flexible con cabecera, cuerpo, medios y acciones.
Anatomía flexible
Cabecera, cuerpo, medio y pie pueden combinarse según el contenido.
Responsive por naturaleza
La tarjeta ocupa el ancho disponible y se adapta mediante grid o flex.
Estilo neutral
Entrega jerarquía sin imponer una identidad visual ajena al proyecto.
Código + resultado
Ejemplos aplicados de Card
Selecciona una composición para revisar únicamente su código y el resultado correspondiente.
<article class="q-card rounded-12 shadow-box-s">
<div class="q-card__header">
<span class="q-badge rounded-p">
Nuevo
</span>
</div>
<div class="q-card__body">
<h2 class="q-card__title">
Nuevo Core V2
</h2>
<p class="q-card__text">
Una arquitectura modular y consistente.
</p>
</div>
<div class="q-card__footer">
<a class="btn btn-primary btn-fs-04" href="#">
Explorar
</a>
</div>
</article>Nuevo Core V2
Una arquitectura modular y consistente.
Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
<article class="q-card rounded-12 shadow-box-s">
<img class="q-card__media" src="../assets/img/filter-showcase.jpg" alt="Jarrón artesanal con flores">
<div class="q-card__body">
<h2 class="q-card__title">
Diseño que inspira
</h2>
<p class="q-card__text">
Imagen protagonista y contenido organizado debajo.
</p>
</div>
<div class="q-card__footer">
<a class="btn btn-primary btn-fs-04" href="#">
Explorar
</a>
</div>
</article>
Diseño que inspira
Imagen protagonista y contenido organizado debajo.
Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
<article class="q-card rounded-12 q-card--horizontal shadow-box-s">
<img class="q-card__media" src="../assets/img/filter-showcase.jpg" alt="Jarrón artesanal con flores">
<div class="q-card__content">
<div class="q-card__body">
<h2 class="q-card__title">
Composición horizontal
</h2>
<p class="q-card__text">
Imagen y contenido comparten el espacio disponible.
</p>
</div>
<div class="q-card__footer">
<a class="btn btn-primary btn-fs-04" href="#">
Ver detalle
</a>
</div>
</div>
</article>Composición horizontal
Imagen y contenido comparten el espacio disponible.
Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
<article class="q-card rounded-12 q-card--overlay shadow-box-s">
<img class="q-card__media" src="../assets/img/filter-showcase.jpg" alt="Jarrón artesanal con flores">
<div class="q-card__body">
<h2 class="q-card__title">
Una historia visual
</h2>
<p class="q-card__text">
El contenido se integra sobre la imagen completa.
</p>
</div>
<div class="q-card__footer">
<a class="btn btn-light btn-fs-04" href="#">
Descubrir
</a>
</div>
</article>Una historia visual
El contenido se integra sobre la imagen completa.
Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
Referencia
Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.
| Clase o atributo | Función | Uso recomendado |
|---|---|---|
.q-card | Superficie base | Contenedor principal del componente. |
.q-card__media | Medio visual | Imagen adaptable para cualquiera de las composiciones. |
.q-card--horizontal | Composición lateral | Distribuye imagen y contenido en dos columnas y se apila en móvil. |
.q-card__content | Contenido lateral | Agrupa cuerpo y pie en la variante horizontal. |
.q-card--overlay | Composición superpuesta | Usa la imagen como fondo con texto y acciones superpuestos. |
.q-card__header | Cabecera | Meta, etiqueta o información previa. |
.q-card__body | Contenido | Agrupa el contenido principal. |
.q-card__title | Título | Encabezado principal de la tarjeta. |
.q-card__text | Texto | Descripción o contenido complementario. |
.q-card__footer | Pie | Acciones o información secundaria. |
.shadow-box-s | Sombra opcional | Añade elevación mediante una utilidad independiente. |
.q-badge | Etiqueta auxiliar | Identifica el estado o categoría mostrada en la cabecera. |
.btn | Botón base | Activa la anatomía compartida del botón. |
.btn-primary | Acción principal | Destaca la acción prioritaria de la tarjeta. |
.btn-light | Acción sobre imagen | Mantiene el contraste de la acción en la variante superpuesta. |
.btn-fs-04 | Escala | Ajusta el tamaño tipográfico de la acción. |
.bc-{token} | Color de acento | Personaliza el título con un color del framework. |
.rounded-12 | Radio opcional | Redondea la superficie sin acoplar la forma a Card. |
.rounded-p | Badge redondeado | Da forma de píldora a la etiqueta auxiliar. |
Recomendaciones
Buenas prácticas de Card
Una idea por tarjeta
Agrupa contenido relacionado y evita convertirla en una página completa.
Título claro
Haz que el encabezado permita comprender la tarjeta al escanearla.
Acciones limitadas
Prioriza una acción principal y una secundaria como máximo.
Grid exterior
Controla columnas y separaciones con utilidades de Quickly.