--- title: Carte description: "Les cards sont des composants polyvalents pour mettre en avant du contenu, créer des liens de navigation ou organiser les informations en sections distinctes." --- Le composant `` vous offre un conteneur cliquable et stylisé pour créer des liens vers d'autres pages, présenter des fonctionnalités ou regrouper du contenu connexe. Associez les cards avec `` pour construire des mises en page en grille. ## Usage ```mdx Launch your docs in minutes. ``` ## Card basique Une card simple avec un titre : Configurez votre premier projet en moins de cinq minutes. ```mdx Set up your first project in under five minutes. ``` ## Card avec icône Ajoutez une icône pour rendre les cards plus distinctives visuellement : Explorez notre documentation complète pour découvrir toutes les fonctionnalités. ```mdx Explore our complete documentation to learn all features. ``` ## Card avec lien Les cards peuvent créer des liens vers d'autres pages : Consultez la documentation API complète. ```mdx View the complete API documentation. ``` ## Card avec flèche Ajoutez un indicateur de flèche pour montrer que la card crée un lien. Les flèches apparaissent automatiquement pour les liens externes, mais vous pouvez les activer pour les liens internes également : Consultez le code source et contribuez. ```mdx Check out the source code and contribute. ``` Les liens externes affichent la flèche automatiquement : Cette card crée un lien vers un site externe. ```mdx This card links to an external site. ``` ## Card avec CTA Ajoutez un texte d'appel à l'action sous le contenu de la card : Débloquez des fonctionnalités avancées et une assistance prioritaire. ```mdx Unlock advanced features and priority support. ``` Combinez la flèche et le CTA pour un effet maximal : Tout ce dont vous avez besoin pour lancer votre premier projet. ```mdx Everything you need to launch your first project. ``` ## Card avec image Affichez une image en haut de la card : Une card avec un en-tête image. ```mdx A card featuring an image header. ``` ## Grille de cards avec Columns Utilisez `Columns` pour organiser plusieurs cards dans une grille responsive : Démarrez en quelques minutes. Parcours d'apprentissage étape par étape. Exemples de code concrets. ```mdx Get up and running in minutes. Step-by-step learning paths. Real-world code examples. ``` ### Mise en page à trois colonnes Documentation Référence API Dernières mises à jour ```mdx Documentation API Reference Latest updates ``` ## Props Le titre affiché en haut de la card. Nom d'icône Font Awesome (ex. : "book", "code", "rocket"). Les icônes utilisent la variante Light pour correspondre au style épuré de la documentation. URL vers laquelle la card crée un lien. Peut être interne (`/docs/intro`) ou externe (`https://example.com`). Chemin vers une image affichée en haut de la card. Affiche un indicateur de flèche (↗) dans le coin supérieur droit. Activé automatiquement pour les liens externes (URL commençant par `http://` ou `https://`). Définissez à `true` pour l'afficher sur les liens internes, ou `false` pour le masquer sur les liens externes. Texte d'appel à l'action personnalisé affiché sous le contenu de la card. Visible uniquement lorsque `href` est également fourni. ## Props de Columns Nombre de colonnes dans la grille. Accepte 1, 2, 3 ou 4. ## Et ensuite ? Parcourir tous les composants disponibles Apprendre à utiliser les composants dans MDX