Diseñador de tarjetas

Arma una tarjeta con imagen, etiqueta, título, texto y botón, ajusta sus estilos y copia el HTML y el CSS listos para tu proyecto.

¿Qué es una tarjeta?

Una tarjeta (card) es un contenedor que agrupa información relacionada sobre un mismo tema: un producto, un artículo del blog, un servicio o un miembro del equipo. Es uno de los patrones más usados en la web porque se lee de un vistazo y se acomoda fácil en cuadrículas.

Por dentro no tiene nada mágico. Combina:

• Un contenedor con background, border-radius, box-shadow y overflow: hidden (para que la imagen respete las esquinas redondeadas).
• Una imagen con object-fit: cover, que la recorta sin deformarla.
• Un cuerpo con padding y Flexbox en columna (flex-direction: column + gap) para separar título, texto y botón.

.tarjeta {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);
}

.tarjeta__imagen {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

Generador

Elige un preset y personaliza el contenido, la imagen y los estilos. Pasa el ratón sobre la tarjeta para ver el efecto hover.

Diseñador de tarjetas

Contenido

Título Texto Sitios rápidos, modernos y fáciles de administrar que convierten visitas en clientes.

Etiqueta Botón

Imagen Mostrar

Estilo Paisaje (SVG)Ondas (SVG)Degradado

Color 1Color 2

Altopx

Tarjeta

Ancho máximopx

PaddingpxRadiopx

BordepxColor borde

Sombra NingunaSuaveMediaFuerte Efecto al pasar el ratónElevación hoverpx

Colores

FondoTítulo

TextoEtiqueta

BotónEstilo botón RellenoOutlineEnlace

<article class="tarjeta">
  <div class="tarjeta__imagen" role="img" aria-label="Imagen de la tarjeta"></div>
  <div class="tarjeta__cuerpo">
    <span class="tarjeta__etiqueta">Nuevo</span>
    <h3 class="tarjeta__titulo">Diseño web para tu negocio</h3>
    <p class="tarjeta__texto">Sitios rápidos, modernos y fáciles de administrar que convierten visitas en clientes.</p>
    <a href="#" class="tarjeta__boton">Ver más</a>
  </div>
</article>

Consejos de uso

• Para una foto real cambia el div de la imagen por una etiqueta <img class="tarjeta__imagen" src="foto.jpg" alt="Descripción">. El CSS ya incluye object-fit: cover.
• Las clases siguen la convención BEM (tarjeta__titulo): el nombre del bloque, dos guiones bajos y la parte. Así no chocan con otros estilos de tu sitio.
• Para mostrar varias tarjetas en cuadrícula, envuélvelas en un contenedor con display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;. Pruébalo en el generador de Grid.
• Usa una jerarquía clara: título grande y oscuro, texto más pequeño y gris, y un único botón o enlace de acción.
• Si toda la tarjeta debe ser clicable, no anides varios enlaces: usa un solo <a> o la técnica del enlace "estirado" con un pseudo-elemento ::after.
• Mantén la misma altura de imagen en todas las tarjetas de una fila para que se vean ordenadas.

Buena práctica

Usa article como contenedor cuando la tarjeta tiene sentido por sí sola (un post, un producto). Ayuda a los lectores de pantalla y al SEO.

Error común

Olvidar overflow: hidden en la tarjeta: la imagen se sale por las esquinas redondeadas y el efecto se ve roto.