Tuile
Les Tuiles affichent des aperçus avec fond stylisé et image proéminente, idéales pour intégrations, modèles ou galeries visuelles.
Les Tuiles affichent des aperçus visuels en premier plan avec des fonds à motif. Utilisez-les à la place des Cards lorsqu'une capture d'écran ou un logo est plus important que le texte -- pages d'intégrations, galeries de modèles et présentations visuelles.
Les captures d'écran montrent l'interface en anglais.
Utilisez les Tuiles lorsque :
- Les aperçus visuels sont plus importants que les descriptions textuelles
- La présentation d'intégrations avec des logos ou des captures d'écran
- La création de galeries de modèles, de thèmes ou d'exemples
- L'affichage de captures d'écran avec des titres et des descriptions optionnelles
Utilisation
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.png?v=mp4qj7v2" alt="Tabs" />
</Tile>Tuile de base
Un tile simple avec une image de preview et un titre :
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=mp4qj7v2" alt="Tabs" />
</Tile>Tuile 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=mp4qj7v2" alt="Tabs" />
</Tile>Tuile vs Card
| Fonctionnalité | Tuile | Card |
|---|---|---|
| Emphase visuelle | Image en premier avec fond à motif | Icône + titre + description |
| Idéal pour | Intégrations, modèles, galeries | Navigation, listes de fonctionnalités, CTA |
| Gestion des images | Grande zone de preview | Petite icône |
| Contenu textuel | Titre + description optionnelle | Titre + description + icône |
Règle générale : Si vous avez une capture d'écran ou un logo à montrer, utilisez Tuile. Si le contenu est principalement textuel, utilisez Card.
Mise en page en grille
Utilisez Columns pour afficher plusieurs Tuiles dans une grille :
Images en mode sombre
Utilisez les classes Tailwind pour afficher différentes images en modes clair et sombre :
<Tile href="/customization/theming" title="Theming">
<img src="/_jd/images/logo-light.webp?v=mp4qj7v2" alt="Theme" className="dark:hidden" data-no-style="true" />
<img src="/_jd/images/logo-dark.webp?v=mp4qj7v2" 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 du mode sombre fonctionnent correctement.
Props
L'URL vers laquelle la tuile pointe. Prend en charge les chemins internes (/docs/intro) et les URL externes (https://example.com). Les liens externes s'ouvrent dans un nouvel onglet.
Texte du titre affiché sous la zone de preview.
Texte de description optionnel sous le titre.
Contenu à afficher dans la zone de preview. Généralement des images ou des SVG.