Link grids
5 min
Link Grid 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.
:::::LinkArray{contentSource="CUSTOM" itemsPerRow="3"}
::::LinkArrayItem{headerType="COLOR" headerColor="#hex"}
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
<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>Colored header cards
<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>Image header cards
<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.