Cartes

Affichez les informations de manière plus dynamique avec un ensemble de cartes — avec ou sans images

Vous pouvez utiliser des cartes pour créer une mise en page visuellement agréable, combinant texte et images dans une grille. Elles sont idéales pour construire des pages d'atterrissage ou afficher tout autre contenu de manière non linéaire.

Vous pouvez ajuster changer entre des cartes moyennes ou grandes et les lier aux ressources pertinentes.

Exemple d'une carte

Page d'accueil GitBook

Visitez notre site Web et découvrez-en plus sur GitBook.

Docs pour développeurs

Créez votre propre intégration GitBook !

Inscrivez-vous à GitBook

Cliquez ici pour commencer gratuitement.

Ajouter des liens

Survolez une carte et ouvrez son menu Options . Ici vous pouvez ajouter un lien cible, afin que les utilisateurs puissent sauter directement à un emplacement lorsqu'ils cliquent sur la carte.

Lors de la création de cartes, nous vous recommandons d'utiliser des liens cibles plutôt que des hyperliens. Avec un lien cible, vos lecteurs peuvent cliquer n'importe où sur la carte pour accéder à l'URL liée.

Ajouter des images

Survolez une carte et ouvrez son menu Options . Ici vous pouvez ajouter une image de couverture à votre carte. Alternativement, cliquez simplement sur le Ajouter une image de couverture option sur la carte elle-même.

Cela ouvrira le Sélectionner un fichier modal. Ici vous pouvez glisser-déposer une nouvelle image dans celui-ci, ou utiliser un fichier image que vous avez précédemment téléchargé dans votre espace.

Ajouter des images pour le mode sombre

Vous pouvez également ajouter des images de couverture qui ne s'afficheront qu'en mode sombre.

Pour ce faire, ouvrez le menu Options de la carte et choisissez Couverture > Modifier la couverture > Ajouter une couverture pour le mode sombre. Cela ouvrira le Sélectionner un fichier modal, où vous pouvez glisser-déposer une nouvelle image ou sélectionner une image précédemment téléchargée.

Choisir la bonne taille d'image

GitBook recadrera automatiquement les images au format paysage en un ratio 16:9 sur ordinateur et mobile. Si les images que vous téléchargez sont en portrait ou ont un ratio 1:1, elles seront recadrées en 16:9 sur ordinateur et affichées en carré ou en portrait sur mobile.

Sur ordinateur, toutes les images des cartes s'afficheront au format paysage 16:9, indépendamment de leurs dimensions. Nous recommandons d'utiliser les mêmes dimensions pour plus de cohérence.

Sur mobile, les images carrées ou en portrait s'afficheront comme montré à gauche. Les images en paysage s'afficheront comme montré à droite.

Pour maintenir la cohérence entre ordinateur et mobile, nous recommandons de téléverser toutes les images de vos cartes au format 16:9 (par ex. 1920px x 1080px).

Si vous voulez que vos cartes adaptent leur mise en page selon la taille de l'écran, nous recommandons de téléverser des images au ratio 1:1, avec le contenu de l'image centré.

Changer la taille des cartes

Vous pouvez sélectionner la taille de la carte en ouvrant le menu Options à gauche de votre bloc de cartes. Le Moyen l'option crée trois cartes sur une ligne horizontale, tandis que le Grand l'option affiche deux cartes plus grandes par ligne.

Vous pouvez rendre les blocs de cartes s'étendre sur toute la largeur de votre fenêtre en cliquant sur le menu Options à côté du bloc et en choisissant Pleine largeur.

Représentation en Markdown

<table data-view="cards">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th data-hidden data-card-target data-type="content-ref"></th>
      <th data-hidden data-card-cover data-type="files"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>Titre d'exemple 1</strong></td>
      <td>Description d'exemple 1.</td>
      <td><a href="https://example.com">https://example.com</a></td>
      <td><a href="https://example.com/image1.svg">example_image1.svg</a></td>
    </tr>
    <tr>
      <td><strong>Titre d'exemple 2</strong></td>
      <td>Description d'exemple 2.</td>
      <td><a href="https://example.com">https://example.com</a></td>
      <td><a href="https://example.com/image2.svg">example_image2.svg</a></td>
    </tr>
    <tr>
      <td><strong>Titre d'exemple 3</strong></td>
      <td>Description d'exemple 3.</td>
      <td><a href="https://example.com">https://example.com</a></td>
      <td><a href="https://example.com/image3.svg">example_image3.svg</a></td>
    </tr>
  </tbody>
</table>