Générateur de cartes en CSS (section de services)
Écrivez les cartes, une par bloc, et choisissez le style. La grille utilise auto-fit : les cartes se réorganisent donc toutes seules du mobile à l’ordinateur.
Mode d’emploiCartes de services pour le site
Disponible en: 
Générateur de cartes en CSS (section de services): à quoi ça sert
Les cartes sont la façon la plus courante de présenter des services, des avantages ou des produits sur une page. Ce générateur compose la section avec le titre et les cartes que vous écrivez, chacune avec icône ou image, titre, texte et lien.
La grille utilise repeat(auto-fit, minmax()), qui réorganise les cartes toute seule du mobile à l’ordinateur sans media queries. Choisissez entre ombre, bordure ou fond coloré, la largeur minimale, la carte entièrement cliquable avec un seul lien accessible et l’effet de montée au survol, qui n’apparaît que sur les appareils avec souris et respecte les personnes qui préfèrent moins de mouvement.
Mode d’emploi
- Écrivez une carte par ligne.
- Choisissez le style, la couleur et la largeur minimale.
- Copiez le code et collez-le dans la page.
Quand l’utiliser
- Section de services d’un garage ou d’un salon.
- Avantages d’un produit.
- Liste des catégories d’une boutique.
Questions fréquentes
Comment les cartes s’adaptent-elles au mobile ?
La grille utilise grid-template-columns avec repeat(auto-fit, minmax(...)) : autant de cartes que la largeur le permet, chacune avec la largeur minimale choisie. Sur mobile, il y en a une par ligne, sur tablette deux et sur ordinateur trois ou quatre, sans media query.
Puis-je rendre toute la carte cliquable ?
Oui. Cochez l’option et indiquez le lien dans chaque carte : le code utilise le titre comme lien et étend la zone de clic à toute la carte avec un pseudo-élément, en gardant le HTML accessible (un seul lien par carte, avec du texte).
Émoji ou icône ?
Les cartes acceptent un court symbole ou une image. Pour un rendu plus professionnel, utilisez des icônes SVG du même jeu (comme Lucide ou Heroicons) en collant l’adresse de l’image dans le champ de la carte.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.