Tarjetas

Las tarjetas (cards) agrupan información relacionada en un bloque visual: un producto, una persona, un plan. Son la pieza estrella de tiendas, directorios, portafolios y páginas de precios.

Las imágenes de estas demos son ilustraciones SVG y degradados en línea para que funcionen sin conexión. En tu proyecto, reemplázalas por un <img> con su alt.

Tarjeta de producto

Cuándo usarlo: catálogos de tiendas en línea, menús de restaurantes, listados de cursos o cualquier cuadrícula de artículos con precio.

Tarjeta de producto

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --acento colorea la etiqueta de oferta, el corazón de favorito y el hover del botón.
• La cuadrícula usa repeat(auto-fit, minmax(220px, 1fr)): se reacomoda sola de 1 a 3 columnas. Sube o baja 220px para cambiar el tamaño mínimo de cada tarjeta.
• Para usar una foto real, sustituye el <svg> dentro de .imagen por <img src="..." alt="Tenis Urban Run rojos" loading="lazy"> y añade object-fit: cover; width: 100%; height: 100%;.
• El precio anterior va en <del>, que los lectores de pantalla anuncian como texto eliminado.

Buena práctica

Mantén la proporción de las imágenes con aspect-ratio para que todas las tarjetas queden alineadas aunque las fotos tengan tamaños distintos.

Tarjeta de perfil

Cuándo usarlo: páginas de equipo ("Nosotros"), perfiles de usuario, directorios de profesionales, autores de un blog.

Tarjeta de perfil

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --portada-1 y --portada-2 forman el degradado de la portada; --acento el botón "Seguir".
• El avatar usa iniciales; para una foto reemplaza el div.avatar por un <img> con border-radius: 50% y object-fit: cover.
• El punto verde de "en línea" es un ::after: elimínalo o cámbialo de color para "ausente".
• Las estadísticas usan una lista de definiciones (<dl>, <dt>, <dd>), la etiqueta semántica correcta para pares "nombre: valor".

Tarjetas de precio

Cuándo usarlo: páginas de planes y suscripciones (SaaS, gimnasios, cursos, hosting) donde quieres guiar al usuario hacia una opción concreta.

Tarjetas de precio

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --acento define el color del plan destacado y de los botones.
• Para destacar otro plan, mueve la clase destacado y la etiqueta .insignia a esa tarjeta.
• Los precios mensual/anual viven en data-mes y data-anio de cada .monto: cambia solo esos números.
• Las características no incluidas llevan la clase no (aparecen tachadas con una ✕).

Error común

Mostrar demasiados planes. Más de 3 o 4 opciones confunden al cliente; si necesitas más, añade una tabla comparativa debajo.

Resumen

• Grid con auto-fit + minmax() = tarjetas responsive sin media queries.
• aspect-ratio mantiene las imágenes uniformes.
• Usa etiquetas semánticas: <article>, <del>, <dl>.
• Destaca visualmente una opción en las tablas de precios para guiar la decisión.