Grilles de liens
5 min
Grille de liens organise le contenu en mises en page de cartes réactives. Elles sont utiles pour créer des pages d’accueil, des centres de navigation, des index de documentation et des collections de ressources associées.
Syntaxe
Vous pouvez ajouter ce composant en utilisant soit Markdown soit MDX.
:::::LinkArray{contentSource="CUSTOM" itemsPerRow="3"}
::::LinkArrayItem{headerType="COLOR" headerColor="#hex"}
Card content.
::::
:::::Les cartes Link Grid prennent en charge trois styles d’en-tête :
- Aucun en-tête pour une mise en page de carte simple.
- couleur, en utilisant la propriété headerColor.
- Image, en utilisant la propriété headerImage.
La propriété itemsPerRow contrôle combien de cartes sont affichées sur chaque ligne.
Exemple MDX
L’exemple suivant démontre les trois styles de cartes disponibles.
Cartes simples
<LinkArray contentSource="CUSTOM" itemsPerRow="3">
<LinkArrayItem>
**Getting Started**
Learn the basics of setting up your documentation project.
</LinkArrayItem>
<LinkArrayItem>
**Configuration**
Customize every aspect of your docs with `archbee.json`.
</LinkArrayItem>
<LinkArrayItem>
**Templates**
Choose from 4 built-in templates to match your brand.
</LinkArrayItem>
</LinkArray>Cartes avec en-tête coloré
<LinkArray contentSource="CUSTOM" itemsPerRow="3">
<LinkArrayItem headerType="COLOR" headerColor="#2166AE">
**API Reference**
Complete endpoint documentation with examples.
</LinkArrayItem>
<LinkArrayItem headerType="COLOR" headerColor="#16A34A">
**Guides**
Step-by-step tutorials for common tasks.
</LinkArrayItem>
<LinkArrayItem headerType="COLOR" headerColor="#DC2626">
**Troubleshooting**
Solutions to common issues and FAQ.
</LinkArrayItem>
</LinkArray>Cartes avec en-tête image
<LinkArray contentSource="CUSTOM" itemsPerRow="3">
<LinkArrayItem headerType="IMAGE" headerImage="https://images.archbee.com/K_JWZranXy1tD6qvlG2v6-YOw4gia62kkE1bvECH6iX-20250910-182430.png?format=webp">
**Visual Docs**
Add images and media to your documentation.
</LinkArrayItem>
<LinkArrayItem headerType="IMAGE" headerImage="https://images.archbee.com/K_JWZranXy1tD6qvlG2v6-_tiGuKOk_9dziwY-l92FX-20250910-190316.png?format=webp">
**Code Examples**
Syntax-highlighted code with copy support.
</LinkArrayItem>
<LinkArrayItem headerType="IMAGE" headerImage="https://images.archbee.com/K_JWZranXy1tD6qvlG2v6-Vjd5vTfjNgJi8V0mulhgV-20250910-190329.png?format=webp">
**API Blocks**
Interactive API endpoint documentation.
</LinkArrayItem>
</LinkArray>Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.