# Cartes

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

Vous pouvez ajuster [passer entre des cartes de taille moyenne ou grande](#card-size) et les lier aux ressources pertinentes.

### Exemple d’une carte

<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="image">Image de couverture</th><th data-hidden data-type="image">Image de couverture (sombre)</th><th data-hidden data-type="image">Image de couverture (sombre)</th><th data-hidden data-card-cover-dark data-type="image">Image de couverture (sombre)</th></tr></thead><tbody><tr><td><strong>Page d’accueil de GitBook</strong></td><td>Visitez notre site Web et découvrez-en plus sur GitBook.</td><td><a href="https://www.gitbook.com/">https://www.gitbook.com/</a></td><td><a href="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FHAbAKXyi5SHXH1rDhg4E%2FGitBook%20homepage.png?alt=media&#x26;token=b2ced317-e488-408b-94a2-03bf72cce821">25_12_10_cards_3.png</a></td><td><a href="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FYYaAqhyC3yLcBknZdlmW%2FGitBook%20homepage.png?alt=media&#x26;token=8478251c-456e-4f30-8b32-39cbcc5640ef">25_12_10_cards_2.png</a></td><td></td><td><a href="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FYYaAqhyC3yLcBknZdlmW%2FGitBook%20homepage.png?alt=media&#x26;token=8478251c-456e-4f30-8b32-39cbcc5640ef">25_12_10_cards_2.png</a></td></tr><tr><td><strong>Docs pour développeurs</strong></td><td>Créez votre propre intégration GitBook !</td><td><a href="https://developer.gitbook.com/">https://developer.gitbook.com/</a></td><td><a href="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F1wL4yuiP0Pi9Oeu0wnmm%2FDeveloper%20docs.png?alt=media&#x26;token=95e0440c-530d-4ce8-8910-607902fc563c">25_12_10_cards_1.png</a></td><td></td><td><a href="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FLpBdK9z1nnfqwZiJxOuD%2FDeveloper%20docs.png?alt=media&#x26;token=32bed668-de47-427b-9371-0cb4ae6976f0">25_12_10_cards.png</a></td><td><a href="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FLpBdK9z1nnfqwZiJxOuD%2FDeveloper%20docs.png?alt=media&#x26;token=32bed668-de47-427b-9371-0cb4ae6976f0">25_12_10_cards.png</a></td></tr><tr><td><strong>Inscrivez-vous à GitBook</strong></td><td>Cliquez ici pour commencer gratuitement.</td><td><a href="https://app.gitbook.com/join">https://app.gitbook.com/join</a></td><td><a href="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2Fg2kgdfMsxOpWQx1Meq8s%2FSign%20up.png?alt=media&#x26;token=e7ef635a-1864-4944-b5a9-2ba7893f6cc0">25_12_10_cards_5.png</a></td><td></td><td></td><td><a href="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2Fp4zjlQyIPTIdwuCeremo%2FSign%20up.png?alt=media&#x26;token=2b8904a8-917f-4eb1-b5fe-5a5575757376">25_12_10_cards_4.png</a></td></tr></tbody></table>

### Ajout de liens <a href="#adding-links-and-images-to-your-cards" id="adding-links-and-images-to-your-cards"></a>

Passez la souris sur une carte et ouvrez son **menu Options** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture>. Ici, vous pouvez ajouter un lien cible afin que les utilisateurs puissent accéder directement à un emplacement lorsqu’ils cliquent sur la carte.

{% hint style="success" %}
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.
{% endhint %}

### Ajout d’images

Passez la souris sur une carte et ouvrez son **menu Options** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture>. Ici, vous pouvez ajouter une image de couverture à votre carte. Sinon, cliquez simplement sur l’option **Ajouter une image de couverture** sur la carte elle-même.

Cela ouvrira la fenêtre **Sélectionner un fichier** . Ici, vous pouvez y glisser-déposer une nouvelle image, ou utiliser un fichier image que vous avez précédemment téléchargé dans votre espace.

#### Ajout d’images pour le mode sombre

Vous pouvez également ajouter des images de couverture qui s’afficheront uniquement en mode sombre.

Pour ce faire, ouvrez **menu Options** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt=""></picture> de la carte et choisissez **Couverture** > **Modifier la couverture** > **Ajouter une couverture pour le mode sombre**. Cela ouvrira la fenêtre **Sélectionner un fichier** , où vous pourrez glisser-déposer une nouvelle image ou sélectionner une image précédemment téléversée.

#### Choisir la bonne taille d’image

GitBook recadrera automatiquement les images en paysage au format 16:9 sur ordinateur et sur mobile. Si les images que vous téléversez sont en portrait ou au format 1:1, elles seront recadrées en 16:9 sur ordinateur et s’afficheront en carré ou en portrait sur mobile.

<figure><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FnX5tZdJgW1Yhf61ZXpGJ%2F26_01_06_cards_desktop%402x.png?alt=media&#x26;token=a49b6556-194d-47ce-a13b-773561703f5b" alt="A GitBook screenshot showing card images on desktop"><figcaption><p>Sur ordinateur, toutes les images de carte s’afficheront au format paysage 16:9, quelles que soient leurs dimensions. Nous recommandons d’utiliser les mêmes dimensions pour plus de cohérence.</p></figcaption></figure>

<figure><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FxUUSyA6H7QwA8p9Nihz1%2F26_01_06_cards_mobile%402x.png?alt=media&#x26;token=df76e62d-dfb4-4197-a140-48d268c52240" alt="A GitBook screenshot showing card images on mobile"><figcaption><p>Sur mobile, les images carrées ou en portrait s’afficheront comme indiqué à gauche. Les images en paysage s’afficheront comme indiqué à droite.</p></figcaption></figure>

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

Si vous souhaitez que vos cartes adaptent leur mise en page en fonction de la taille de l’écran, nous vous recommandons de téléverser des images au format 1:1, avec le contenu de votre image centré.

### Modifier la taille des cartes

Vous pouvez sélectionner la taille de la carte en ouvrant **menu Options** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture> à gauche de votre bloc de cartes. L’option **Moyen** crée trois cartes sur une même ligne horizontale, tandis que l’option **Grand** affiche deux cartes plus grandes sur chaque ligne.

{% hint style="info" %}
Vous pouvez faire en sorte que les blocs de cartes [occupent toute la largeur de votre fenêtre](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/fr/creating-content/blocks/..#full-width-blocks) en cliquant sur **menu Options** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://3903131528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook" data-size="line"></picture> à côté du bloc et en choisissant **Pleine largeur**.
{% endhint %}

### Représentation en Markdown

```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">image_exemple1.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">image_exemple2.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">image_exemple3.svg</a></td>
    </tr>
  </tbody>
</table>
```