---
title: Kacheln
description: Kacheln zeigen Inhaltsvorschauen mit gemustertem Hintergrund und hervorgehobenem Bildbereich – ideal für Integrationen, Vorlagen und Galerien.
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
Kacheln zeigen bildorientierte Vorschauen mit gemusterten Hintergründen. Verwenden Sie sie anstelle von Karten, wenn ein Screenshot oder Logo wichtiger ist als Text: auf Integrationsseiten, in Vorlagengalerien und auf bildlastigen Seiten.
Die Screenshots zeigen die Benutzeroberfläche auf Englisch.
Verwenden Sie Kacheln für:
- **Visuelle Vorschauen**, die wichtiger sind als Textbeschreibungen
- **Darstellung von Integrationen** mit Logos oder Screenshots
- **Erstellung von Galerien** mit Vorlagen, Themes oder Beispielen
- **Anzeige von Screenshots** mit Titeln und optionalen Beschreibungen
## Verwendung
```mdx
```
## Einfache Kachel
Eine einfache Kachel mit Vorschaubild und Titel:
```mdx
```
## Kachel mit Beschreibung
Fügen Sie eine Beschreibung für zusätzlichen Kontext hinzu:
```mdx
```
## Kachel vs. Karte
| Funktion | Kachel | Karte |
|---------|------|------|
| Visuelle Hervorhebung | Bildorientiert mit gemustertem Hintergrund | Symbol + Titel + Beschreibung |
| Am besten geeignet für | Integrationen, Vorlagen, Galerien | Navigation, Funktionslisten, CTAs |
| Bilddarstellung | Großer Vorschaubereich | Kleines Symbol |
| Textinhalt | Titel + optionale Beschreibung | Titel + Beschreibung + Symbol |
**Faustregel:** Wenn Sie einen Screenshot oder ein Logo zeigen möchten, verwenden Sie eine Kachel. Wenn der Inhalt hauptsächlich aus Text besteht, verwenden Sie eine Karte.
## Rasterlayout
Verwenden Sie `Columns`, um mehrere Kacheln in einem Raster anzuzeigen:
## Bilder im Dark Mode
Verwenden Sie Tailwind-Klassen, um in hellen und dunklen Modi unterschiedliche Bilder anzuzeigen:
```mdx
```
Das Attribut `noStyle` verhindert die standardmäßige Bildformatierung, damit die Dark-Mode-Klassen korrekt funktionieren.
## Eigenschaften
Die URL, auf die die Kachel verweist. Unterstützt sowohl interne Pfade (`/docs/intro`) als auch externe URLs (`https://example.com`). Externe Links werden in einem neuen Tab geöffnet.
Titeltext, der unterhalb des Vorschaubereichs angezeigt wird.
Optionale Beschreibung unterhalb des Titels.
Inhalt, der im Vorschaubereich angezeigt wird. In der Regel Bilder oder SVGs.
## Wie geht es weiter?
Alle verfügbaren Komponenten durchsuchen
Erfahren, wie Komponenten in MDX verwendet werden