# Card (tarjetas de contenido)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/component-card.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Componentes · Presentación

Agrupa información relacionada en una superficie flexible con cabecera, cuerpo, medios y acciones.

v2.0

▭
## 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.

i
## Composición recomendada
Usa `.q-card` como superficie y añade únicamente las regiones que necesites. Las utilidades controlan el layout exterior.

Código + resultado

## Ejemplos aplicados de Card
Selecciona una composición para revisar únicamente su código y el resultado correspondiente.

HTML

```html
<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>
```

Resultado aplicado   Card · base

Componente real
Nuevo

## Nuevo Core V2
Una arquitectura modular y consistente.

Explorar

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

HTML

```html
<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>
```

Resultado aplicado   Card · vertical

Componente real
![Jarrón artesanal con flores](../assets/img/filter-showcase.jpg)
## Diseño que inspira
Imagen protagonista y contenido organizado debajo.

Explorar

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

HTML

```html
<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>
```

Resultado aplicado   Card · horizontal

Componente real
![Jarrón artesanal con flores](../assets/img/filter-showcase.jpg)
## Composición horizontal
Imagen y contenido comparten el espacio disponible.

Ver detalle

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

HTML

```html
<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>
```

Resultado aplicado   Card · superpuesta

Componente real
![Jarrón artesanal con flores](../assets/img/filter-showcase.jpg)
## Una historia visual
El contenido se integra sobre la imagen completa.

Descubrir

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

01
### Una idea por tarjeta
Agrupa contenido relacionado y evita convertirla en una página completa.

02
### Título claro
Haz que el encabezado permita comprender la tarjeta al escanearla.

03
### Acciones limitadas
Prioriza una acción principal y una secundaria como máximo.

04
### Grid exterior
Controla columnas y separaciones con utilidades de Quickly.