Kachel
Kacheln zeigen Inhaltsvorschauen mit gemustertem Hintergrund und großem Bildbereich. Nutzen Sie sie für Integrationen, Vorlagen oder visuelle Galerien.
Kacheln zeigen bildorientierte Vorschauen mit gemusterten Hintergründen. Verwenden Sie sie statt Cards, 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, wenn:
- Visuelle Vorschauen wichtiger sind als Textbeschreibungen
- Integrationen präsentiert werden sollen, etwa mit Logos oder Screenshots
- Galerien mit Vorlagen, Themes oder Beispielen erstellt werden
- Screenshots angezeigt werden sollen, mit Titeln und optionalen Beschreibungen
Verwendung
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=mw83zxfs" 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=mw83zxfs" alt="Tabs" />
</Tile>Kachel mit Beschreibung
Fügen Sie eine Beschreibung hinzu, um mehr Kontext zu bieten:
<Tile
href="/components/tabs"
title="Tabs Component"
description="Organize content into switchable tabbed sections"
>
<img src="/_jd/images/tabs-preview.webp?v=mw83zxfs" alt="Tabs" />
</Tile>Kachel vs. Karte
| Merkmal | Tile | Card |
|---|---|---|
| Visuelle Betonung | Bildorientiert mit gemustertem Hintergrund | Icon + Titel + Beschreibung |
| Geeignet für | Integrationen, Vorlagen, Galerien | Navigation, Funktionslisten, CTAs |
| Umgang mit Bildern | Großer Vorschaubereich | Kleines Icon |
| Textinhalt | Titel + optionale Beschreibung | Titel + Beschreibung + Icon |
Faustregel: Verwenden Sie Tile für einen Screenshot oder ein Logo. Verwenden Sie Card für textlastige Inhalte.
Rasterlayout
Verwenden Sie Columns, um mehrere Tiles in einem Raster anzuzeigen:
Bilder im Dark Mode
Verwenden Sie Tailwind-Klassen, um im hellen und dunklen Modus unterschiedliche Bilder anzuzeigen:
<Tile href="/customization/theming" title="Theming">
<img src="/_jd/images/logo-light.webp?v=mw83zxfs" alt="Theme" className="dark:hidden" data-no-style="true" />
<img src="/_jd/images/logo-dark.webp?v=mw83zxfs" alt="Theme" className="hidden dark:block" data-no-style="true" />
</Tile>Das Attribut noStyle deaktiviert die standardmäßige Bildformatierung. Ohne dieses Attribut funktionieren die Klassen für den Dark Mode nicht korrekt.
Eigenschaften
Die URL, auf die die Kachel verweist. Akzeptiert interne Pfade (/docs/intro) oder externe URLs (https://example.com). Externe Links werden in einem neuen Tab geöffnet.
Titel, der unter dem Vorschaubereich angezeigt wird.
Optionale Beschreibung, die unter dem Titel angezeigt wird.
Inhalt, der im Vorschaubereich angezeigt wird. In der Regel Bilder oder SVGs.