UNIMINUTO y Antonio José Camacho
Diseño de interfaces webFundamentos Web · Programación Web
Ing. Diego Javier Mancera Dávila
Cards UI Íconos gratis
Diseño de interfaces · Unidad de componentes

¿Qué es una card?

Un contenedor que agrupa la información de un solo tema: una noticia, un producto, una persona. Se lee de un vistazo y lleva a más detalle.

Ver sus partesIr a los tipos
Laptop rodeada de tarjetas de interfaz flotantes
Anatomía

Las cinco partes de una card

No todas las cards llevan todo. Solo el contenedor y el título son obligatorios; el resto se agrega cuando aporta información.

  1. 1
    ContenedorobligatorioEl borde o el fondo que separa la card del resto. Basta un borde de 1 px; la sombra es opcional.
  2. 2
    MediaopcionalImagen, video o gráfico. Va arriba o a la izquierda y mantiene la misma proporción en todas las cards.
  3. 3
    TítuloobligatorioLo más visible después de la imagen. Una o dos líneas como máximo.
  4. 4
    Texto y metadatosopcionalDescripción corta, fecha, lugar, autor. Con letra más pequeña y gris.
  5. 5
    AccionesopcionalUno o dos botones o enlaces. Si toda la card es clicable, sobra el botón.
1 2 3 4 5
TUTORIAL<card>HTML + CSS · NIVEL BÁSICO

Cómo maquetar una card con Flexbox

Paso a paso, desde el HTML semántico hasta los estados de hover y foco.

20 oct 2026 · 6 min de lecturaLeer
Catálogo

14 tipos de cards y cuándo usar cada una

Cada ejemplo funciona: puedes hacer clic en las cards interactivas. Los nombres, precios y cifras son datos de ejemplo para clase.

PendientescheduleVence el 24 oct

Taller 3: formulario de contacto accesible

Usa etiquetas <label>, validación nativa y mensajes de error claros.

Vale 15 % de la notaVer enunciadochevron_right

Card básica

Contenido

Solo texto: título, descripción y una acción. Es la más simple y la más usada.

Úsala para
Tareas, avisos, resúmenes cortos.
La ves en
Google Classroom, Notion, Moodle.
EVENTOHACKATÓN
24 HORASSÁB 8 NOV · 8:00 A. M.

Hackatón de desarrollo web

Equipos de 3 personas construyen un sitio para un emprendimiento del barrio.

location_onSede Norte, CaliInscribirme

Card con imagen

Contenido

La imagen arriba atrae la mirada; el texto abajo explica. Todas las imágenes de la rejilla deben tener la misma proporción.

Úsala para
Noticias, eventos, artículos de blog.
La ves en
Medium, El Tiempo, Eventbrite.
12:04

Flexbox en 12 minutos

Canal de clase · 1,2 k vistas · hace 3 días

Card superpuesta

Contenido

El texto va encima de la imagen, sobre un degradado oscuro que garantiza que se pueda leer.

Úsala para
Videos, películas, destinos, portadas.
La ves en
YouTube, Netflix, Airbnb Experiencias.
</>

HTML desde cero

8 lecciones · 2 h 15 min
62 % completado
{ }

CSS: cajas y Flexbox

10 lecciones · 3 h
15 % completado

Card horizontal

Contenido

Imagen pequeña a la izquierda y texto a la derecha. Ocupa menos alto y permite listas largas.

Úsala para
Resultados de búsqueda, cursos, canciones, pedidos.
La ves en
Spotify, Rappi, Platzi.
-18 %

Teclado mecánico 60 % con switches rojos

starstarstarstarstar_half4,6 (312)
$ 189.900$ 231.900
Envío gratis a Cali

Card de producto

Comercio

Imagen, nombre, precio, calificación y envío. El precio es lo más destacado. Prueba el corazón para marcar favorito.

Úsala para
Tiendas virtuales y catálogos.
La ves en
Mercado Libre, Falabella, Amazon.

Plan Estudiante

Recomendado
$ 24.900 / mes
  • check3 sitios web con dominio propio
  • checkCertificado SSL incluido
  • checkCopias de seguridad semanales
  • removeCorreo corporativo

Card de precios

Comercio

Compara planes. Se ponen de 2 a 4 en fila y el plan recomendado se marca con un borde de color, no con un tamaño distinto.

Úsala para
Suscripciones, hosting, software.
La ves en
Hostinger, Canva, Spotify.
Método de envío

Card de selección

Comercio · Interacción

Toda la card funciona como un botón de opción. Es más fácil de tocar en el celular que un círculo pequeño. Prueba a elegir otra.

Úsala para
Envíos, métodos de pago, respuestas de un test.
La ves en
Procesos de pago, encuestas, Duolingo.
LG

Laura Gómez

Desarrolladora front-end · Cali

Hace sitios para pequeños negocios con HTML, CSS y WordPress. Le gusta enseñar accesibilidad.

14Proyectos
320Seguidores
4,9Valoración

Card de perfil

Personas

Foto o iniciales, nombre, rol, cifras y acciones. Ayuda a decidir si vale la pena contactar a alguien.

Úsala para
Equipos, docentes, directorios, redes sociales.
La ves en
LinkedIn, GitHub, Behance.
«Pasé de copiar plantillas a entender por qué funcionan. Mi primer sitio para la panadería de mi tía ya está en línea.»
JR
Julián Restrepo
Estudiante de 3.er semestre

Card de testimonio

Personas · Contenido

Una cita textual y su autor. Debe ser una opinión real y con nombre: los testimonios inventados restan confianza.

Úsala para
Páginas de servicios, cursos, landing pages.
La ves en
Sitios de universidades, Shopify, Trustpilot.
Visitas al sitio · esta semanamore_horiz
2.418
arrow_upward12 % frente a la semana pasada

Card de estadística (KPI)

Datos y estado

Cifra grande, comparación y tendencia. El color verde o rojo indica si el cambio es bueno o malo.

Úsala para
Tableros, reportes, paneles de administración.
La ves en
Power BI, Google Analytics, Hostinger hPanel.

Tu hosting está casi lleno

Usas el 92 % del espacio. Si llega al 100 %, el sitio no podrá recibir archivos nuevos.

Liberar espacio

Card de notificación

Datos y estado

Avisa de algo que requiere atención. El color de fondo comunica la gravedad: azul informa, amarillo advierte, rojo alerta.

Úsala para
Errores, avisos de sistema, confirmaciones.
La ves en
Paneles de hosting, bancos en línea, Gmail.
En progreso2

Maquetar la sección de precios

24 octchecklist3/5chat_bubble2LG

Optimizar imágenes del portafolio

event30 octattach_file4JR
+ Añadir tarjeta

Card de tarea (Kanban)

Datos y estado

Compacta y arrastrable. Etiquetas de color, fecha, avance y responsable caben en una sola línea.

Úsala para
Gestión de proyectos y flujos de trabajo.
La ves en
Trello, Jira, GitHub Projects.
¿Qué necesito para el curso? expand_more

Un computador con navegador actualizado y un editor de código.

  • Visual Studio Code (gratis)
  • Google Chrome o Firefox
  • Cuenta de GitHub para entregar

Card expandible

Interacción

Muestra un resumen y se abre al hacer clic. En HTML se hace sin JavaScript con <details> y <summary>.

Úsala para
Preguntas frecuentes, detalles técnicos, filtros.
La ves en
Google Play, páginas de ayuda, GOV.CO.

Card volteable

Interacción

Tiene frente y reverso. Se logra con CSS 3D: transform: rotateY(180deg) y backface-visibility: hidden.

Úsala para
Tarjetas de estudio, juegos de memoria, datos curiosos.
La ves en
Quizlet, Anki, Kahoot.
Criterio de diseño

Por qué una card se ve «hecha por IA»

Las herramientas de IA repiten las mismas decisiones en todas las cards. Compara la misma información resuelta de dos formas.

closeGenérica

Unlock Your Potential

Discover amazing opportunities and take your skills to the next level with our innovative solution.

Get Started ✨
  • Degradado morado a azul y emoji como imagen.
  • Texto que podría servir para cualquier cosa.
  • Esquinas muy redondas y sombra enorme de color.
  • Todo centrado, incluso los párrafos.
  • Botón en píldora con degradado y otro emoji.
checkNatural
CURSO LIBREWORDPRESS
EN 4 SÁBADOSNOV 8 – NOV 29 · 8:00 A. M.

Crea el sitio de tu negocio con WordPress

Dominio, plantilla, formulario de contacto y botón de WhatsApp. Cupo para 20 personas.

Sala de sistemas 3Reservar cupo
  • La imagen habla del tema: fechas y nombre del curso.
  • Datos concretos: cuándo, dónde, cuántos cupos.
  • Radio de 8 px y borde de 1 px, sin sombra.
  • Texto alineado a la izquierda, fácil de leer.
  • Una sola acción con un verbo claro.
Contenido real antes que diseñoEscribe primero el texto definitivo. Un «Lorem ipsum» esconde problemas de espacio.
Un acento, no cincoElige un color de marca para acciones y deja el resto en grises con un leve tono.
Borde o sombra, no ambos fuertesUn borde de 1 px separa lo suficiente. Si usas sombra, que sea corta y neutra.
No todas las cards igualesDestaca la importante con borde de color o fondo distinto. Si todas brillan, ninguna destaca.
Íconos de una sola familiaUsa una biblioteca, como Material Symbols o Phosphor. Nada de emojis como íconos.
Espaciado con un sistemaUsa múltiplos de 4 u 8 px: 8, 12, 16, 24. Los mismos en todas las cards.
Para practicar

Código base de una card

HTML semántico y CSS con variables. Cópialo, pégalo en tu editor y cambia el contenido.

card.html
<article class="card">
  <img class="card__media" src="evento.jpg" alt="Estudiantes en la hackatón">
  <div class="card__body">
    <h3 class="card__title">Hackatón de desarrollo web</h3>
    <p class="card__text">Equipos de 3 personas construyen un sitio real.</p>
    <div class="card__footer">
      <span class="card__meta">Sáb 8 nov · Sede Norte</span>
      <a class="card__link" href="inscripcion.html">Inscribirme</a>
    </div>
  </div>
</article>

<style>
:root { --borde: #dde2ea; --texto: #111a2c; --gris: #596277; --acento: #1d5bbf; }
.card { max-width: 320px; background: #fff; border: 1px solid var(--borde);
        border-radius: 8px; overflow: hidden; }
.card__media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.card__title { margin: 0; font-size: 17px; color: var(--texto); }
.card__text { margin: 0; font-size: 14px; color: var(--gris); }
.card__footer { display: flex; justify-content: space-between; align-items: center; }
.card__meta { font-size: 13px; color: var(--gris); }
.card__link { color: var(--acento); font-weight: 700; text-decoration: none; }
.card:hover { border-color: var(--acento); }
</style>
Recursos

Íconos gratis para tus cards

27 bibliotecas de íconos en SVG y PNG con su estilo y su licencia. Las que tienen la línea amarilla arriba ofrecen el estilo degradado con relleno de Flaticon.

Sin atribución: uso libreCon atribución: pon el crédito en el pie de páginaRevisar la licencia de cada ícono