Linkraster
5 min
Linkraster Blöcke organisieren Inhalte in responsive Kartenlayouts. Sie sind nützlich für die Erstellung von Landing Pages, Navigationsknotenpunkten, Dokumentationsindizes und Sammlungen verwandter Ressourcen.
Syntax
Sie können diese Komponente entweder mit Markdown oder MDX hinzufügen.
:::::LinkArray{contentSource="CUSTOM" itemsPerRow="3"}
::::LinkArrayItem{headerType="COLOR" headerColor="#hex"}
Karteninhalt.
::::
:::::Link-Gitter-Karten unterstützen drei Header-Stile:
- Kein Header für ein einfaches Kartenlayout.
- FARBE, unter Verwendung der headerColor Eigenschaft.
- BILD, unter Verwendung der headerImage Eigenschaft.
Die itemsPerRow Eigenschaft steuert, wie viele Karten pro Zeile angezeigt werden.
MDX‑Beispiel
Das folgende Beispiel zeigt die drei verfügbaren Kartenstile.
Einfache Karten
<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>Karten mit farbigem Header
<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>Karten mit Bild‑Header
<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.