Composant carte avec des propriétés personnalisées CSS

Un composant carte est un conteneur autonome pour du contenu. Objectifs de conception : un espacement intérieur cohérent grâce à des variables d'espacement, des couleurs personnalisables selon le thème grâce à des variables d'alias, un dimensionnement adaptatif sans JS et la prise en charge de variantes (surélevée, avec contour, plate) au moyen de propriétés personnalisées CSS.

Utilisez une seule classe .card avec des propriétés personnalisées CSS pour les valeurs configurables. Les éléments internes (en-tête, corps, pied de page) héritent de la portée de la carte. Cela limite la dérive des styles entre les instances de carte dans toute la base de code.

Redéfinissez les propriétés personnalisées au niveau de la carte avec des classes de variantes plutôt que d'écrire des ensembles de règles distincts. Les classes de variantes doivent uniquement redéfinir les variables modifiées ; les propriétés inchangées héritent automatiquement des valeurs de base, sans répétition.

Lorsqu'une classe de thème parente modifie --color-surface, toutes les cartes situées dans ce thème mettent automatiquement à jour leur arrière-plan. Aucun code de surcharge propre à la carte n'est nécessaire : le système de variables alias s'en charge de manière transparente.

Utilisez clamp() avec des remplacements de propriétés personnalisées pour une marge intérieure fluide : --card-padding: clamp(1rem, 4vw, 2rem). Les fenêtres d’affichage plus grandes bénéficient d’une marge intérieure plus généreuse ; les petites fenêtres d’affichage utilisent une marge minimale — le tout contrôlé depuis une seule définition de jeton.

Une grille de cartes utilisant le remplissage automatique de CSS Grid avec minmax crée une mise en page qui s’organise d’elle-même : grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). Les cartes occupent l’espace disponible et passent automatiquement à la ligne, sans points de rupture définis par des requêtes de média.

Conservez un ratio d’aspect cohérent pour les images des cartes avec aspect-ratio: 16/9 sur le conteneur de l’image. Les images remplissent le conteneur avec object-fit: cover, ce qui garantit une hauteur uniforme des cartes, quelles que soient les dimensions de l’image source.

Ajoutez des états de survol et de focalisation interne qui soulèvent légèrement la carte : transform: translateY(-2px) et une box-shadow renforcée. Animez ces changements avec une transition de 200 ms en douceur sur la transformation et l’ombre portée, afin d’obtenir un retour d’interaction fluide qui ménage le compositeur.

Rendez toute la carte cliquable avec un lien étendu : positionnez la carte relativement et positionnez le lien principal de manière absolue avec inset: 0. Les lecteurs d’écran lisent le texte du lien ; la superposition recouvre visuellement la carte pour les utilisateurs de la souris.

Ajoutez une variante .card--loading qui remplace le contenu par un effet de scintillement squelettique grâce à une animation CSS : background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to)), animée avec background-size: 200% et animation: shimmer 1.5s infinite.

En mode sombre, le jeton --color-surface passe automatiquement d’une teinte claire à une teinte sombre. Si les cartes surélevées reposent sur une ombre portée pour créer de la profondeur — effet qui disparaît sur les arrière-plans sombres — ajoutez une bordure discrète ou augmentez le contraste de la couleur de surface pour préserver la perception du relief en mode sombre.

Comment les propriétés personnalisées CSS permettent-elles de créer des variantes de cartes sans dupliquer l’ensemble des règles ?

La création d’un composant de carte avec des propriétés personnalisées CSS produit une primitive d’interface flexible, thématisable et capable de gérer les variantes. Les variables de base définissent les valeurs par défaut ; les classes de variantes les remplacent de manière sélective ; les classes de thème les remplacent globalement. Associé à un dimensionnement adaptatif, à des liens accessibles et à des états de chargement, ce modèle s’intègre proprement à différents systèmes de conception.