Composants · 73 éléments
Des composants de cartes pour tous les types de contenu
Des cartes polyvalentes pour articles, produits, profils, fonctionnalités et statistiques : cartes avec image, cartes horizontales, cartes en surimpression et effets interactifs au survol.
Parcourir · Catégories
Des composants de cartes pour tous les types de contenu
73 éléments
Rien ne correspond à ce filtre.
Guide
Les cartes sont le couteau suisse du design web. Elles regroupent un contenu (une image, un titre, une description et une action) en une unité nette et facile à parcourir, qui fonctionne en grille, en carrousel comme en liste. Nos 73 modèles de cartes couvrent tous les types de contenu que vous rencontrerez en construisant un site, de la simple carte texte à la vitrine produit riche et interactive.
Les variantes de cartes
La carte verticale avec image est la mise en page classique des articles de blog, actualités et produits : l’image en haut, le texte en dessous, l’action en bas. La carte horizontale place l’image sur le côté, idéale pour les résultats de recherche, les listes compactes et les widgets de barre latérale. La carte en surimpression pose le texte sur l’image avec un dégradé, pour un rendu éditorial spectaculaire prisé des portfolios. La carte interactive propose des effets au survol (agrandissement, ombre qui se soulève ou changement de couleur) qui invitent au clic et signalent l’interactivité.
Bien utiliser les cartes
Affichez les cartes en grilles responsive : 3 colonnes sur ordinateur, 2 sur tablette, 1 sur mobile. Gardez les titres sous 60 caractères et les descriptions sous 120 pour un alignement régulier. Utilisez le même format d’image dans toute la grille pour éviter les décalages : 16:9 pour les contenus paysage, 4:3 pour les produits et 1:1 pour les avatars. Ajoutez un bouton ou un lien d’action en bas de chaque carte pour une navigation claire.
Les cartes en situation
Utilisez des cartes produit dans votre module e-commerce, des cartes d’article dans un module de blog et des cartes de profil dans les sections de témoignages ou les pages d’équipe. Associez des cartes de fonctionnalités à une section hero pour créer une landing page convaincante. Les cartes rendent aussi très bien dans les designs en mode sombre, avec de fines bordures et des ombres portées. Pour les sites minimalistes, préférez des cartes sans bordure avec beaucoup d’espace blanc pour un rendu aéré et raffiné.
Questions
Qu’est-ce qu’un composant de carte en design web ?
Une carte est un conteneur rectangulaire qui regroupe des contenus liés : en général une image, un titre, une courte description et un bouton d’action. Les cartes servent à présenter des éléments dans des grilles faciles à parcourir, comme des listes de produits, des articles ou des membres d’équipe.
Combien de cartes afficher par rangée ?
Comptez 3 à 4 cartes par rangée sur ordinateur, 2 sur tablette et 1 sur mobile. Pour des cartes très denses en informations, 2 par rangée sur ordinateur peuvent être préférables. Évitez d’en mettre plus de 4 : elles deviennent trop étroites pour être lues.
Puis-je ajouter des effets au survol ?
Oui. Beaucoup de nos modèles de cartes intègrent des effets au survol : ombre qui s’élève, agrandissement, voile de couleur et bouton qui apparaît. Ces effets signalent l’interactivité et améliorent le taux de clic.
Quel format d’image pour les cartes ?
Utilisez le 16:9 pour les cartes de contenu (blog, actualités), le 4:3 ou le 1:1 pour les cartes produit, et le 1:1 pour les cartes de profil ou d’avatar. La cohérence au sein d’une grille compte plus que le format lui-même : des formats mélangés donnent une mise en page brouillonne.
Continuer l’exploration
Accordions Components
Browse accordions components templates
Alerts Components
Browse alerts components templates
Avatars Components
Browse avatars components templates
Blog Module
Complete blog feature with multiple design variants
About Page Templates
Full page layouts in the about category
Templates for Healthcare
Templates designed for healthcare businesses
YouTube Templates
Templates with YouTube integration support
Votre prochain site commence ici.
Tout ceci est à un clic.
Chaque section, composant, page et module de cette bibliothèque est prêt dans l’éditeur Communik, aux couleurs de votre marque.
Gratuit pour commencer. Sans carte bancaire.