Carte
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 <Card> 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 <Columns> pour construire des mises en page en grille.
Usage
<Card title="Quickstart" icon="rocket" href="/quickstart">
Launch your docs in minutes.
</Card>Card basique
Une card simple avec un titre :
<Card title="Getting Started">
Set up your first project in under five minutes.
</Card>Card avec icône
Ajoutez une icône pour rendre les cards plus distinctives visuellement :
<Card title="Documentation" icon="book">
Explore our complete documentation to learn all features.
</Card>Card avec lien
Les cards peuvent créer des liens vers d'autres pages :
<Card title="API Reference" icon="code" href="/introduction">
View the complete API documentation.
</Card>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 :
<Card title="Quickstart" icon="github" href="/quickstart" arrow={true}>
Check out the source code and contribute.
</Card>Les liens externes affichent la flèche automatiquement :
<Card title="External Resource" href="https://example.com">
This card links to an external site.
</Card>Card avec CTA
Ajoutez un texte d'appel à l'action sous le contenu de la card :
<Card title="Quickstart" icon="star" href="/quickstart" cta="Upgrade now">
Unlock advanced features and priority support.
</Card>Combinez la flèche et le CTA pour un effet maximal :
<Card title="Quickstart" icon="rocket" href="/quickstart" arrow={true} cta="Start building">
Everything you need to launch your first project.
</Card>Card avec image
Affichez une image en haut de la card :
<Card title="Visual Guide" img="/_jd/images/card-example.webp?v=moa8o29o">
A card featuring an image header.
</Card>Grille de cards avec Columns
Utilisez Columns pour organiser plusieurs cards dans une grille responsive :
<Columns cols={2}>
<Card title="Quickstart" icon="rocket" href="/quickstart">
Get up and running in minutes.
</Card>
<Card title="Tutorials" icon="graduation-cap" href="/content/mdx-basics">
Step-by-step learning paths.
</Card>
<Card title="Examples" icon="flask" href="/components/overview">
Real-world code examples.
</Card>
</Columns>Mise en page à trois colonnes
<Columns cols={3}>
<Card title="Docs" icon="book">
Documentation
</Card>
<Card title="API" icon="code">
API Reference
</Card>
<Card title="Blog" icon="newspaper">
Latest updates
</Card>
</Columns>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.