Kacheln
Kacheln zeigen Inhaltsvorschauen mit gemustertem Hintergrund und hervorgehobenem Bildbereich – ideal für Integrationen, Vorlagen und Galerien.
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
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=msp3nl3i" alt="Tabs" />
</Tile>Einfache Kachel
Eine einfache Kachel mit Vorschaubild und Titel:
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=msp3nl3i" alt="Tabs" />
</Tile>Kachel mit Beschreibung
Fügen Sie eine Beschreibung für zusätzlichen Kontext hinzu:
<Tile
href="/components/tabs"
title="Tabs Component"
description="Organize content into switchable tabbed sections"
>
<img src="/_jd/images/tabs-preview.webp?v=msp3nl3i" alt="Tabs" />
</Tile>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:
<Tile href="/customization/theming" title="Theming">
<img src="/_jd/images/logo-light.webp?v=msp3nl3i" alt="Theme" className="dark:hidden" data-no-style="true" />
<img src="/_jd/images/logo-dark.webp?v=msp3nl3i" alt="Theme" className="hidden dark:block" data-no-style="true" />
</Tile>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.