Tarjetas

Lo que hace que una tarjeta se vea profesional

No es el borde ni la sombra: es la jerarquía interna. En cada tarjeta de esta página hay exactamente un elemento que domina (el nombre, la cifra, el título), uno o dos niveles de apoyo y un espaciado consistente entre ellos. Cuando una tarjeta «se ve rara», el 90 % de las veces es porque dos elementos compiten por mandar o porque los espacios internos son todos distintos. Estas recetas traen esa disciplina puesta.

Cómo usarlas

1. Copia CSS y HTML: la estructura interna es la mitad del diseño.
2. Sustituye textos e iniciales. En la tarjeta de imagen, reemplaza el fondo degradado por tu <img> con object-fit: cover — el comentario del código marca el punto exacto.
3. Si vas a mostrar varias en rejilla, envuélvelas en un grid con minmax y deja que ellas pongan su max-width.

El velo de texto sobre imagen, bien hecho

Poner texto sobre una foto sin velo es apostar a que la foto siempre será oscura donde el texto es claro. El velo degradado de la tarjeta de imagen resuelve el caso general: transparente arriba, oscuro abajo, texto siempre legible sin apagar la imagen completa. Es el mismo patrón que usan las plataformas de video, y aquí está en seis líneas.

Dónde encajan

• Equipo y nosotros: la tarjeta de perfil en una rejilla de tres o cuatro columnas.
• Páginas de precios: la de precio con el plan recomendado llevando el borde degradado.
• Prueba social: testimonios intercalados entre secciones largas.
• Listas de recursos: la fila de descarga, compacta y escaneable, para documentos y packs.

Las demás categorías

La familia completa, cada una con sus piezas y su código: formas y recortes, vidrio y neón, bento grid, botones y controles, formularios, datos y métricas y microinteracciones. Y si buscas generadores en vez de piezas hechas, están en Código web.

Preguntas frecuentes

¿Cómo pongo varias tarjetas en una rejilla responsive?

Con grid y una sola línea: grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)). Las tarjetas se reparten solas y bajan de columna cuando no caben. Sus max-width internos evitan que se estiren de más en pantallas anchas.

¿Por qué las tarjetas usan article y figure en el HTML?

Porque son contenido autocontenido con significado propio, y esas etiquetas se lo comunican al navegador y a los lectores de pantalla. Un div funcionaría visualmente igual, pero regalarías semántica que no cuesta nada.

¿Cómo sustituyo el degradado por una imagen real?

En la tarjeta de imagen, reemplaza el span de fondo por una img con position: absolute, inset: 0, width y height al 100 % y object-fit: cover. El velo y el zoom del hover siguen funcionando igual.

¿Puedo hacer clicable toda la tarjeta?

La de imagen ya lo es (es un enlace). Para las demás, la técnica limpia es un enlace interno con un pseudoelemento expandido (::after con inset: 0), que mantiene un solo destino de tabulación en vez de envolver todo en un a gigante.

¿El borde degradado de la tarjeta de precio funciona en todos los navegadores?

Sí: es el truco estándar de doble fondo (padding-box y border-box) sobre un borde transparente, soportado desde hace años. Y respeta el border-radius, que es su ventaja frente a los métodos con pseudoelementos.

¿Cómo adapto las tarjetas a un tema claro?

Invierte los tres valores base: fondo (#16141f a blanco), texto (#f4f3f8 a tinta oscura) y borde (#2c2938 a un gris claro). La estructura y los acentos de color funcionan igual en ambos temas.