Cuadrículas de enlaces
5 min
Cuadrícula de enlaces organiza contenido en diseños de tarjetas responsivas. Son útiles para crear páginas de destino, centros de navegación, índices de documentación y colecciones de recursos relacionados.
Sintaxis
Usted puede agregar este componente usando Markdown o MDX.
<LinkArray contentSource="CUSTOM" itemsPerRow="3">
<LinkArrayItem headerType="COLOR" headerColor="#2166AE">
Card content.
</LinkArrayItem>
</LinkArray>Las tarjetas de Cuadrícula de Enlaces admiten tres estilos de encabezado:
- Sin encabezado para un diseño de tarjeta simple.
- COLOR, usando la propiedad headerColor.
- Imagen, usando la propiedad headerImage.
La propiedad itemsPerRow controla cuántas tarjetas se muestran en cada fila.
Ejemplo de MDX
El siguiente ejemplo demuestra los tres estilos de tarjeta disponibles.
Tarjetas 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>Tarjetas con encabezado de 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>Tarjetas con encabezado de imagen
<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.