Tuiles

Utilisez des tuiles pour créer des éléments de présentation visuelle avec un arrière-plan à motifs, un titre et une description. Les tuiles sont idéales pour afficher des aperçus de composants, des mises en avant de fonctionnalités ou des éléments de navigation dans une mise en page en grille.

Accordion

Deux variantes

Tile example

<Tile href="/components/accordions" title="Accordion" description="Deux variantes">
  <img src="/images/tiles/accordion-light.svg" alt="Aperçu du composant Accordion" className="block dark:hidden" />
  <img src="/images/tiles/accordion-dark.svg" alt="Aperçu du composant Accordion (mode sombre)" className="hidden dark:block" />
</Tile>

Mise en page en grille

Combinez les tuiles avec le composant Columns pour créer une grille responsive d’aperçus visuels.

Accordion

Deux variantes

Accordion

Deux variantes

Accordion

Deux variantes

Grid layout example

<Columns cols={3}>
  <Tile href="/components/accordions" title="Accordion" description="Deux variantes">
    <img src="/images/tiles/accordion-light.svg" alt="Aperçu du composant Accordion" className="block dark:hidden" />
    <img src="/images/tiles/accordion-dark.svg" alt="Aperçu du composant Accordion (mode sombre)" className="hidden dark:block" />
  </Tile>
  <Tile href="/components/accordions" title="Accordion" description="Deux variantes">
    <img src="/images/tiles/accordion-light.svg" alt="Aperçu du composant Accordion" className="block dark:hidden" />
    <img src="/images/tiles/accordion-dark.svg" alt="Aperçu du composant Accordion (mode sombre)" className="hidden dark:block" />
  </Tile>
  <Tile href="/components/accordions" title="Accordion" description="Deux variantes">
    <img src="/images/tiles/accordion-light.svg" alt="Aperçu du composant Accordion" className="block dark:hidden" />
    <img src="/images/tiles/accordion-dark.svg" alt="Aperçu du composant Accordion (mode sombre)" className="hidden dark:block" />
  </Tile>
</Columns>

Propriétés

string

requis

URL vers laquelle accéder lorsque la tuile est cliquée.

string

Le titre affiché sous l’aperçu de la tuile.

string

Une brève description affichée sous le titre.

React.ReactNode

requis

Contenu affiché dans la zone d’aperçu de la tuile, généralement des images ou des SVG.

Onglets

Infobulles

Prise en main

Organiser

Personnaliser

Créer du contenu

Documenter des API

Déployer

Optimisation

Mise en page en grille

Propriétés

​Mise en page en grille

​Propriétés

Mise en page en grille

Propriétés