> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-card.md).

# AX - Carte

## Aperçu

**AX - Carte** est un composant Experience Cloud qui affiche du contenu dans un format structuré et contenu sur les pages des sites Experience.

Utilisez-le pour présenter des informations dans des blocs organisés — comme des détails de produit, des profils d’utilisateurs, des articles, des ressources ou tout contenu bénéficiant d’une séparation visuelle. Faites glisser et déposez n’importe quels composants Experience Cloud dans la carte pour construire son contenu, puis configurez le style, les en-têtes et les pieds de page dans Experience Builder.

Idéal pour les catalogues de produits, les bibliothèques de ressources, les profils des membres d’équipe, les aperçus d’articles ou tout autre contenu de portail nécessitant une organisation visuelle claire et une séparation nette.

{% hint style="danger" %}
Ce composant [utilise des emplacements](/experience-cloud/experience-cloud-fr/premiers-pas/learning-the-basics.md#understanding-slots) pour une personnalisation avancée, ce qui le rend idéal pour les sites LWR. Les sites Aura ne prennent pas en charge ce niveau de personnalisation.
{% endhint %}

<figure><img src="/files/c5ea8d45104ab103c0105b2989ce3377d8d9acb4" alt="" width="563"><figcaption></figcaption></figure>

## Configuration de la carte Avonni

### Ajouter un titre de carte

Donnez à votre carte Avonni un titre clair et informatif pour aider les utilisateurs à identifier rapidement son contenu. Voici comment faire :

* **Recherchez l’attribut « Titre de la carte » :** Ce paramètre se trouve dans les options de configuration du composant Avonni Card dans le générateur de votre site Experience Cloud.
* **Saisissez votre titre :** Tapez le texte que vous souhaitez afficher comme titre. Restez concis et descriptif.
* **Emplacement :** Le titre apparaîtra automatiquement sur le côté gauche de votre carte Avonni, offrant un point d’ancrage visuel.

**Exemple :**

Si votre carte Avonni affiche des informations sur un produit, vous pouvez utiliser un titre de carte comme « Emplacement ».

### Afficher l’en-tête

Activez l’attribut « Afficher l’en-tête » pour ajouter un conteneur polyvalent en haut à droite de votre carte Avonni. Cela vous permet de :

* **Personnaliser le contenu de la carte :** Vous pouvez faire glisser et déposer d’autres composants, tels que des boutons, des icônes ou du texte supplémentaire, directement dans l’en-tête.
* **Créer des mises en page flexibles :** Disposez les éléments dans l’en-tête pour obtenir l’apparence et les fonctionnalités idéales pour votre carte.

**Exemple :** Ajoutez un bouton « Créer un nouveau cas » sur une page de compte client. En cliquant sur ce bouton, une boîte de dialogue de flux s’ouvrirait pour guider l’utilisateur dans la soumission d’un nouveau cas d’assistance et la collecte de toutes les informations nécessaires.

### Afficher le pied de page

Cette option active une section de pied de page en bas de votre carte Avonni. Vous pouvez utiliser l’emplacement de pied de page fourni pour ajouter du contenu comme des liens, des boutons ou du texte supplémentaire.

### Rembourrage du contenu

Ajustez l’espacement autour du contenu à l’intérieur de votre carte. Utilisez ce paramètre pour créer une mise en page plus compacte avec un contenu au ras de la bordure, ou pour ajouter davantage d’espace.

## Tutoriels

| Nom                                                                                                                                  | Description                                                                 |
| ------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- |
| [**Création d’une vitrine MapCard**](/experience-cloud/experience-cloud-fr/tutoriels/components/card/creating-a-mapcard-showcase.md) | Apprenez à créer une vitrine MapCard avec les composants Avonni Card et Map |

## Apparence

### **Taille**

* **Largeur :** Contrôle la largeur horizontale de la carte. Vous pouvez utiliser des largeurs fixes (pixels, pourcentages) ou laisser la carte s’adapter à son contenu ou à la taille de son conteneur.
* **Hauteur :** Contrôle la hauteur verticale de la carte. Comme pour la largeur, vous pouvez utiliser des paramètres de hauteur fixes ou flexibles.
* **Débordement :** Détermine la manière dont la carte gère le contenu qui dépasse ses dimensions. Les options peuvent inclure :
  * **Visible :** Le contenu dépasse des limites de la carte.
  * **Masqué :** Le contenu est rogné aux bords de la carte.
  * **Défilement :** Ajoute des barres de défilement à la carte si le contenu dépasse.

### **En-tête**

* **Couleur de fond :** Définit la couleur de fond de la zone d’en-tête de la carte.
* **Couleur du texte :** Définit la couleur de tous les éléments textuels de l’en-tête.
* **Taille de police :** Contrôle la taille du texte de l’en-tête.
* **Graisse de police :** Définit l’épaisseur du texte de l’en-tête (par exemple : normal, gras, léger).
* **Famille de police :** Spécifie la police utilisée pour le texte de l’en-tête.
* **Taille de la bordure inférieure :** Définit l’épaisseur de la bordure inférieure séparant l’en-tête du contenu principal de la carte.
* **Couleur de la bordure inférieure :** Définit la couleur de la bordure inférieure dans l’en-tête.

### **Média**

* **Largeur :** Contrôle la largeur de la section média de la carte (probablement pour les images ou les vidéos).
* **Hauteur :** Contrôle la hauteur de la section média de la carte.
* **Ajustement de l’objet :** Détermine comment une image ou une vidéo doit être redimensionnée pour s’adapter à son conteneur. Les options incluent :
  * **Remplir :** Étire le contenu pour remplir l’espace, ce qui peut déformer le rapport hauteur/largeur.
  * **Contenir :** Met le contenu à l’échelle pour qu’il tienne entièrement dans l’espace, ce qui peut laisser des zones vides.
  * **Couvrir :** Met le contenu à l’échelle pour couvrir tout l’espace, ce qui peut entraîner un recadrage.
  * **Aucun :** Affiche le contenu à sa taille d’origine.
  * **Réduire :** Le contenu est réduit s’il dépasse les dimensions du conteneur, sinon il s’affiche à sa taille d’origine.
* **Taille de la bordure :** Contrôle l’épaisseur de la bordure autour de l’élément média.
* **Couleur de la bordure :** Définit la couleur de la bordure autour de l’élément média.

### **Bordure**

* **Taille :** Définit l’épaisseur globale de la bordure entourant l’ensemble de la carte.
* **Rayon :** Contrôle le degré d’arrondi des coins de la carte.
* **Couleur :** Définit la couleur de la bordure de la carte


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.