--- title: Tuile description: "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 ```mdx Tabs ``` ## Tuile de base Un tile simple avec une image de preview et un titre : Tabs ```mdx Tabs ``` ## Tuile avec description Ajoutez une description pour plus de contexte : Tabs ```mdx Tabs ``` ## 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 : Slack GitHub Stripe ## Images en mode sombre Utilisez les classes Tailwind pour afficher différentes images en modes clair et sombre : ```mdx Theme ``` 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. ## Et ensuite ? Parcourir tous les composants disponibles Apprendre à utiliser les composants dans MDX