Dar forma visual a las tarjetas de beneficios de un producto es uno de los pasos más satisfactorios al construir una landing page. Aquí se trabaja desde la estructura del contenedor hasta la tipografía y los íconos, aplicando principios de diseño responsivo que permiten que cada tarjeta se adapte correctamente desde dispositivos móviles hasta pantallas de escritorio.
¿Cómo se estructura el contenedor de la tarjeta con CSS?
El punto de partida es el elemento article en HTML, que funciona como la tarjeta completa. A este se le asigna la clase .product-detail-card y se definen propiedades que controlan su tamaño de forma flexible [00:52]:
css
.product-detail-card {
width: 90%;
min-width: 288px;
max-width: 400px;
height: 150px;
margin: 15px auto;
padding: 15px;
}
width: 90% permite que la tarjeta ocupe casi todo el ancho disponible pero deje respirar los bordes.min-width y max-width delimitan el crecimiento del contenedor, algo fundamental en diseño responsive: si no se establece un máximo, los elementos se estiran y el resultado visual es pobre.- El valor
auto en el margin horizontal centra la tarjeta dentro de su contenedor padre.
¿Qué papel juegan las variables de color y el box shadow?
Para el fondo se utilizan variables CSS previamente definidas. En este caso se emplean dos tonos de negro: black y warm-black [02:30]. Al probar los colores directamente en el navegador, se descubrió que estaban invertidos y se corrigieron sin perder tiempo.
css
.product-detail-card {
background-color: var(--warm-black);
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}
El border-radius de cinco píxeles suaviza las esquinas, mientras que el box-shadow con un valor alfa de 0.16 genera una sombra sutil que da profundidad a la tarjeta sin recargarla.
¿Cómo se inserta un ícono como imagen de fondo?
El ícono del reloj se maneja con un span al que se le asigna la clase .clock. En lugar de usar una etiqueta <img>, se recurre a background-image [03:42], una técnica muy común para íconos decorativos:
css
.clock {
display: inline-block;
width: 20px;
height: 20px;
margin-bottom: 10px;
background-image: url('./assets/icons/clock.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
background-size: cover asegura que la imagen cubra todo el contenedor sin distorsionarse.background-position: center la centra.background-repeat: no-repeat evita que se repita como un patrón.
Esta combinación de tres propiedades es una práctica recomendada siempre que se use una imagen de fondo [04:18].
¿Cómo se estilizan los textos de título y cuerpo de la tarjeta?
La tarjeta contiene dos párrafos con clases distintas: .title y .body. Cada uno recibe un tratamiento tipográfico diferente para establecer jerarquía visual [05:15].
css
.title {
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.8;
color: var(--just-white);
}
.body {
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
color: #808080;
}
- El título usa
font-weight: bold para simular un encabezado y color blanco para máximo contraste.
- El cuerpo emplea un gris medio (
#808080) que lo diferencia del título sin competir por la atención.
- La unidad
rem garantiza escalabilidad tipográfica relativa al tamaño raíz del documento.
¿Cómo ayudan las dev tools a depurar estilos rápidamente?
Durante el proceso, las herramientas de desarrollo del navegador permitieron detectar que el height del ícono tenía un valor incorrecto y corregirlo al instante [04:40]. Usar dev tools para inspeccionar elementos, modificar valores en tiempo real y luego trasladar los cambios al código ahorra mucho tiempo y reduce errores.
Con la primera tarjeta terminada, el reto consiste en clonar la estructura y replicar las tres tarjetas restantes que aparecen en el diseño de Figma. Comparte tu resultado en los comentarios para recibir retroalimentación.
