Card
Utilisez le composant Card pour créer des conteneurs cliquables et stylés avec icônes, images, liens et CTA en grille.
Le composant <Card> est un conteneur stylisé et cliquable. Utilisez-le pour créer un lien vers d'autres pages ou regrouper du contenu associé. Associez les cartes à <Columns> pour créer des mises en page en grille.
Utilisation
<Card title="Quickstart" icon="rocket" href="/quickstart">
Launch your docs in minutes.
</Card>Carte de base
Une carte simple avec un titre :
<Card title="Getting Started">
Set up your first project in under five minutes.
</Card>Carte avec icône
Ajoutez une icône pour rendre les cartes plus visuellement distinctives :
<Card title="Documentation" icon="book">
Explore our complete documentation to learn all features.
</Card>Carte avec lien
Les cartes peuvent créer un lien vers d'autres pages :
<Card title="API Reference" icon="code" href="/introduction">
View the complete API documentation.
</Card>Carte avec flèche
Ajoutez un indicateur de flèche pour montrer que la carte pointe vers un lien. Les flèches apparaissent automatiquement pour les liens externes, mais vous pouvez également les activer pour les liens internes :
<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>Carte avec CTA
Ajoutez un texte d'appel à l'action sous le contenu de la carte :
<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 maximum d'impact :
<Card title="Quickstart" icon="rocket" href="/quickstart" arrow={true} cta="Start building">
Everything you need to launch your first project.
</Card>Carte avec image
Affichez une image en haut de la carte :
<Card title="Visual Guide" img="/_jd/images/card-example.webp?v=mrtvmucv">
A card featuring an image header.
</Card>Grille de cartes avec Columns
Utilisez Columns pour organiser plusieurs cartes 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 carte.
Nom d'icône Font Awesome (par exemple, "book", "code", "rocket"). Le rendu utilise la variante Solid par défaut ; ajoutez un préfixe de style comme light/book pour modifier l'épaisseur. Voir Icônes.
URL vers laquelle pointe la carte. Peut être interne (/docs/intro) ou externe (https://example.com).
Chemin vers une image affichée en haut de la carte.
Affiche un indicateur de flèche (↗) dans le coin supérieur droit. Activé automatiquement pour les liens externes (URLs commençant par http:// ou https://). Définissez sur true pour l'afficher sur les liens internes, ou sur false pour le masquer sur les liens externes.
Texte d'appel à l'action personnalisé affiché sous le contenu de la carte. Visible uniquement lorsque href est également fourni.
Props de Columns
Nombre de colonnes dans la grille. Accepte 1, 2, 3 ou 4.