---
title: Cuadrículas de enlaces
slug: docs/es/cuadriculas-de-enlaces
docTags: 
createdAt: 2026-06-05T14:03:01.725Z
---

[Cuadrícula de enlaces](docId\:pESqvrrUdOhU5KV4dL3uF) 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.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::LinkArray{contentSource="CUSTOM" itemsPerRow="3"}
::::LinkArrayItem{headerType="COLOR" headerColor="#hex"}
Card content.
::::
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<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.&#x20;
- `COLOR`, usando la propiedad `headerColor`.&#x20;
- `Imagen`, usando la propiedad `headerImage`.&#x20;

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

```javascript
<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

```javascript
<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

```javascript
<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>
```

