Tuiles

Utilisez le composant tiles pour afficher des aperçus visuels avec miniatures d’images, titres et descriptions dans une mise en page en grille responsive.

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.

Titre de la tuile

Brève description

Tile example

<Tile href="/your-link" title="Tile title" description="Short description">
  <img src="/images/your-preview-light.svg" alt="Tile preview" className="block dark:hidden" />
  <img src="/images/your-preview-dark.svg" alt="Tile preview (dark mode)" className="hidden dark:block" />
</Tile>

Le contenu (children) d’une tuile peut être n’importe quelle image, SVG ou autre nœud React que vous souhaitez afficher dans la zone d’aperçu. Fournissez des ressources distinctes pour les modes clair et sombre en utilisant les classes utilitaires block dark:hidden et hidden dark:block afin que l’aperçu corresponde au thème actif.

​

Mise en page en grille

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

Tuile un

Brève description

Tuile deux

Brève description

Tuile trois

Brève description

Grid layout example

<Columns cols={3}>
  <Tile href="/link-one" title="Tile one" description="Short description">
    <img src="/images/preview-one-light.svg" alt="Tile preview" className="block dark:hidden" />
    <img src="/images/preview-one-dark.svg" alt="Tile preview (dark mode)" className="hidden dark:block" />
  </Tile>
  <Tile href="/link-two" title="Tile two" description="Short description">
    <img src="/images/preview-two-light.svg" alt="Tile preview" className="block dark:hidden" />
    <img src="/images/preview-two-dark.svg" alt="Tile preview (dark mode)" className="hidden dark:block" />
  </Tile>
  <Tile href="/link-three" title="Tile three" description="Short description">
    <img src="/images/preview-three-light.svg" alt="Tile preview" className="block dark:hidden" />
    <img src="/images/preview-three-dark.svg" alt="Tile preview (dark mode)" className="hidden dark:block" />
  </Tile>
</Columns>

​

Propriétés

href · string · requis

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

title · string

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

description · string

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

children · React.ReactNode · requis

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