Tuile
Les Tuiles affichent des aperçus de contenu avec un fond à motif stylisé et une zone d'image prominente, idéales pour présenter des intégrations, des modèles ou des 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=moa8o29o" 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=moa8o29o" 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=moa8o29o" 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=moa8o29o" alt="Theme" className="dark:hidden" data-no-style="true" />
<img src="/_jd/images/logo-dark.webp?v=moa8o29o" 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.