---
title: Link grids
slug: docs/link-grids
docTags:
createdAt: 2026-06-05T14:03:01.725Z
---
[Link Grid](docId\:Z_VgvWiFBolvUazqD6vWM) blocks organize content into responsive card layouts. They are useful for creating landing pages, navigation hubs, documentation indexes, and collections of related resources.
## Syntax
You can add this component using either Markdown or MDX.
::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::LinkArray{contentSource="CUSTOM" itemsPerRow="3"}
::::LinkArrayItem{headerType="COLOR" headerColor="#hex"}
Card content.
::::
:::::
```
:::
:::Tab{title="MDX"}
```javascript
Card content.
```
:::
::::
Link Grid cards support three header styles:
- No header for a simple card layout.
- `COLOR`, using the `headerColor` property.
- `IMAGE`, using the `headerImage` property.
The `itemsPerRow` property controls how many cards are displayed on each row.
## MDX example
The following example demonstrates the three available card styles.
### Plain cards
```javascript
**Getting Started**
Learn the basics of setting up your documentation project.
**Configuration**
Customize every aspect of your docs with `archbee.json`.
**Templates**
Choose from 4 built-in templates to match your brand.
```
### Colored header cards
```javascript
**API Reference**
Complete endpoint documentation with examples.
**Guides**
Step-by-step tutorials for common tasks.
**Troubleshooting**
Solutions to common issues and FAQ.
```
### Image header cards
```javascript
**Visual Docs**
Add images and media to your documentation.
**Code Examples**
Syntax-highlighted code with copy support.
**API Blocks**
Interactive API endpoint documentation.
```