Componente de tarjeta con propiedades personalizadas de CSS

Un componente de tarjeta es un contenedor independiente para contenido. Objetivos de diseño: espaciado interno coherente mediante tokens de espaciado, colores tematizables mediante tokens de alias, tamaño adaptable sin JavaScript y compatibilidad con variantes (elevada, con contorno y plana) mediante propiedades personalizadas de CSS.

Utilice una única clase .card con propiedades personalizadas de CSS para los valores configurables. Los elementos internos (encabezado, cuerpo y pie) heredan los valores del ámbito de la tarjeta. Esto limita la divergencia de estilos entre las instancias de tarjetas de toda la base de código.

Reemplace las propiedades personalizadas de nivel de tarjeta mediante clases de variantes en lugar de escribir conjuntos de reglas independientes. Las clases de variantes solo necesitan redefinir las variables modificadas; las propiedades que no cambian heredan automáticamente los valores base sin repetirlos.

Cuando una clase de tema principal cambia --color-surface, todas las tarjetas dentro de ese tema actualizan automáticamente su fondo. No se necesita código de sobrescritura de temas específico para cada tarjeta: el sistema de tokens de alias se encarga de ello de forma transparente.

Use clamp() con sobrescrituras de propiedades personalizadas para obtener un padding fluido: --card-padding: clamp(1rem, 4vw, 2rem). Las vistas más grandes reciben un padding más generoso; las pequeñas, el mínimo, todo controlado desde una única definición de token.

Una cuadrícula de tarjetas que usa auto-fill de CSS Grid con minmax crea un diseño autoorganizado: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). Las tarjetas ocupan el espacio disponible y se ajustan automáticamente sin puntos de interrupción de media queries.

Mantenga una relación de aspecto uniforme en las imágenes de las tarjetas con aspect-ratio: 16/9 en el contenedor de la imagen. Las imágenes llenan el contenedor con object-fit: cover, lo que garantiza alturas uniformes en las tarjetas independientemente de las dimensiones de la imagen de origen.

Añada estados hover y focus-within que eleven ligeramente la tarjeta: transform: translateY(-2px) y un box-shadow más pronunciado. Anime con transition: transform 200ms ease, box-shadow 200ms ease para ofrecer una respuesta de interacción fluida y optimizada para el compositor.

Haga que se pueda hacer clic en toda la tarjeta mediante un enlace extendido: establezca el posicionamiento relativo de la tarjeta y coloque el enlace principal con posicionamiento absoluto usando inset: 0. Los lectores de pantalla leen el texto del enlace; la superposición cubre visualmente la tarjeta para los usuarios del ratón.

Añada una variante .card--loading que sustituya el contenido por un skeleton con efecto shimmer mediante una animación CSS: background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to)) animado con background-size: 200% y animation: shimmer 1.5s infinite.

En modo oscuro, el token --color-surface cambia automáticamente de claro a oscuro. Si las tarjetas elevadas dependen de box-shadow para crear profundidad —que desaparece sobre fondos oscuros—, añada un borde sutil o aumente el contraste del color de superficie para que la elevación se perciba en modo oscuro.

¿Cómo permiten las propiedades personalizadas de CSS crear variantes de tarjetas sin duplicar todo el conjunto de reglas?

Crear un componente de tarjeta con propiedades personalizadas de CSS permite obtener una primitiva de interfaz flexible, tematizable y compatible con variantes. Las variables base establecen los valores predeterminados; las clases de variantes sobrescriben solo lo necesario; las clases de tema sobrescriben los valores globalmente. Combinado con tamaños adaptables, enlaces accesibles y estados de carga, este patrón se escala limpiamente en los sistemas de diseño.