> For the complete documentation index, see [llms.txt](https://smedai.aivd.ch/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://smedai.aivd.ch/applications/gitbook/creer/blocs/cartes.md).

# Cartes

{% hint style="info" %}
Cette page vise des **contributeurs invités**.

Vous pouvez éditer le contenu d’un ou plusieurs espaces.

Vous n’avez généralement pas accès aux réglages d’**organisation**, de **site publié** ou de **mise en ligne**.

Pour ces sujets, contactez les responsables de l’espace ou l’équipe SIC.
{% endhint %}

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'accueil ou afficher tout autre contenu de façon non linéaire.

Vous pouvez passer des cartes **moyennes** à **grandes**. Voir [Changer la taille des cartes](#changer-la-taille-des-cartes).

### Exemple de cartes

<table data-view="cards"><thead><tr><th>Titre</th><th data-card-target data-type="content-ref">Cible</th></tr></thead><tbody><tr><td>Blocs</td><td><a href="/applications/gitbook/creer/blocs.md">Blocs</a></td></tr><tr><td>Mise en forme</td><td><a href="/applications/gitbook/creer/mise-en-forme-de-votre-contenu.md">Mise en forme de votre contenu</a></td></tr><tr><td>Contenu en ligne</td><td><a href="/applications/gitbook/creer/mise-en-forme-de-votre-contenu/contenu-en-ligne.md">Contenu en ligne</a></td></tr></tbody></table>

***

### Ajout de liens

Passez la souris sur une carte et ouvrez son **menu Options** ![The Options menu icon in GitBook](https://gitbook.com/docs/~gitbook/image?url=https%3A%2F%2F3903131528-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNkEGS7hzeqa35sMXQZ4X%252Fuploads%252FaS1QvPIBVYwhpFTGcPBN%252Foptions-menu.svg%3Falt%3Dmedia%26token%3D3ee40bbf-f4fb-41fa-aa30-306b559cbe88\&width=300\&dpr=3\&quality=100\&sign=54060725\&sv=2). Ici vous pouvez ajouter un lien cible, afin que les utilisateurs puissent sauter directement à un emplacement lorsqu'ils cliquent sur la carte.

{% hint style="success" %}
Lorsque vous créez des cartes, nous vous recommandons d'utiliser **des liens cibles au lieu d'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** ![The Options menu icon in GitBook](https://gitbook.com/docs/~gitbook/image?url=https%3A%2F%2F3903131528-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNkEGS7hzeqa35sMXQZ4X%252Fuploads%252FaS1QvPIBVYwhpFTGcPBN%252Foptions-menu.svg%3Falt%3Dmedia%26token%3D3ee40bbf-f4fb-41fa-aa30-306b559cbe88\&width=300\&dpr=3\&quality=100\&sign=54060725\&sv=2). 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.

#### Ajout d'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** ![The Options menu icon in GitBook](https://gitbook.com/docs/~gitbook/image?url=https%3A%2F%2F3903131528-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNkEGS7hzeqa35sMXQZ4X%252Fuploads%252FaS1QvPIBVYwhpFTGcPBN%252Foptions-menu.svg%3Falt%3Dmedia%26token%3D3ee40bbf-f4fb-41fa-aa30-306b559cbe88\&width=300\&dpr=3\&quality=100\&sign=54060725\&sv=2) 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 en paysage au ratio 16:9 sur bureau 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 bureau et s'afficheront en carré ou en portrait sur mobile.

![A GitBook screenshot showing card images on desktop](https://gitbook.com/docs/~gitbook/image?url=https%3A%2F%2F3903131528-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNkEGS7hzeqa35sMXQZ4X%252Fuploads%252FnX5tZdJgW1Yhf61ZXpGJ%252F26_01_06_cards_desktop%25402x.png%3Falt%3Dmedia%26token%3Da49b6556-194d-47ce-a13b-773561703f5b\&width=768\&dpr=3\&quality=100\&sign=5c623ee5\&sv=2)

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

![A GitBook screenshot showing card images on mobile](https://gitbook.com/docs/~gitbook/image?url=https%3A%2F%2F3903131528-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNkEGS7hzeqa35sMXQZ4X%252Fuploads%252FxUUSyA6H7QwA8p9Nihz1%252F26_01_06_cards_mobile%25402x.png%3Falt%3Dmedia%26token%3Ddf76e62d-dfb4-4197-a140-48d268c52240\&width=768\&dpr=3\&quality=100\&sign=987f3f6d\&sv=2)

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 bureau et mobile, nous recommandons de télécharger 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 vous recommandons de télécharger des images avec un ratio 1:1, et le contenu de votre image centré.

### Changer la taille des cartes

Vous pouvez sélectionner la taille de la carte en ouvrant le **menu Options** ![The Options menu icon in GitBook](https://gitbook.com/docs/~gitbook/image?url=https%3A%2F%2F3903131528-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FNkEGS7hzeqa35sMXQZ4X%252Fuploads%252FaS1QvPIBVYwhpFTGcPBN%252Foptions-menu.svg%3Falt%3Dmedia%26token%3D3ee40bbf-f4fb-41fa-aa30-306b559cbe88\&width=300\&dpr=3\&quality=100\&sign=54060725\&sv=2) à gauche de votre bloc de cartes. Le **Moyen** option crée trois cartes sur une ligne horizontale, tandis que le **Grand** option affiche deux cartes plus grandes sur chaque ligne.

{% hint style="info" %}
Vous pouvez faire en sorte que les blocs de cartes soient [pleine largeur](/applications/gitbook/creer/blocs.md#blocs-pleine-largeur) en cliquant sur le **menu Options** à côté du bloc, puis **Pleine largeur**.
{% endhint %}

### 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 exemple 1</strong></td>
      <td>Description exemple 1.</td>
      <td><a href="https://example.com">https://example.com</a></td>
      <td><a href="https://example.com/image1.svg">exemple_image1.svg</a></td>
    </tr>
    <tr>
      <td><strong>Titre exemple 2</strong></td>
      <td>Description exemple 2.</td>
      <td><a href="https://example.com">https://example.com</a></td>
      <td><a href="https://example.com/image2.svg">exemple_image2.svg</a></td>
    </tr>
    <tr>
      <td><strong>Titre exemple 3</strong></td>
      <td>Description exemple 3.</td>
      <td><a href="https://example.com">https://example.com</a></td>
      <td><a href="https://example.com/image3.svg">exemple_image3.svg</a></td>
    </tr>
  </tbody>
</table>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://smedai.aivd.ch/applications/gitbook/creer/blocs/cartes.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.