Tile
Les tuiles affichent des aperçus de contenu avec un motif d'arrière-plan stylisé. À utiliser pour intégrations, modèles ou galeries visuelles.
Les tuiles affichent des aperçus centrés sur l'image avec des arrière-plans à motifs. Utilisez-les à la place des Cards quand une capture d'écran ou un logo compte plus que le texte : pages d'intégrations, galeries de modèles et pages riches en images.
Les captures d'écran montrent l'interface en anglais.
Utilisez les Tiles quand :
- Les aperçus visuels sont plus importants que les descriptions textuelles
- Vous présentez des intégrations avec des logos ou des captures d'écran
- Vous créez des galeries de modèles, de thèmes ou d'exemples
- Vous affichez des captures d'écran avec des titres et des descriptions optionnelles
Utilisation
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=mrtvmucv" alt="Tabs" />
</Tile>Tile de base
Une tuile simple avec une image d'aperçu et un titre :
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=mrtvmucv" alt="Tabs" />
</Tile>Tile avec description
Ajoutez une description pour plus de contexte :
<Tile
href="/components/tabs"
title="Tabs Component"
description="Organize content into switchable tabbed sections"
>
<img src="/_jd/images/tabs-preview.webp?v=mrtvmucv" alt="Tabs" />
</Tile>Tile vs Card
| Fonctionnalité | Tile | Card |
|---|---|---|
| Emphase visuelle | Image en premier avec arrière-plan à motifs | Icône + titre + description |
| Idéal pour | Intégrations, modèles, galeries | Navigation, listes de fonctionnalités, CTAs |
| Gestion des images | Grande zone d'aperçu | Petite icône |
| Contenu textuel | Titre + description optionnelle | Titre + description + icône |
Règle empirique : si vous avez une capture d'écran ou un logo à montrer, utilisez Tile. Si le contenu est principalement textuel, utilisez Card.
Disposition en grille
Utilisez Columns pour afficher plusieurs Tiles dans une grille :
Images en mode sombre
Utilisez les classes Tailwind pour afficher des images différentes en mode clair et sombre :
<Tile href="/customization/theming" title="Theming">
<img src="/_jd/images/logo-light.webp?v=mrtvmucv" alt="Theme" className="dark:hidden" data-no-style="true" />
<img src="/_jd/images/logo-dark.webp?v=mrtvmucv" alt="Theme" className="hidden dark:block" data-no-style="true" />
</Tile>L'attribut noStyle empêche le style d'image par défaut afin que les classes de mode sombre fonctionnent correctement.
Props
L'URL vers laquelle la tuile pointe. Prend en charge les chemins internes (/docs/intro) et les URLs externes (https://example.com). Les liens externes s'ouvrent dans un nouvel onglet.
Texte du titre affiché sous la zone d'aperçu.
Texte de description optionnel sous le titre.
Contenu à afficher dans la zone d'aperçu. Généralement des images ou des SVG.