> 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 - Card** est un composant Experience Cloud qui affiche du contenu dans un format contenu et visuellement structuré 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 autre contenu bénéficiant d’une séparation visuelle. Faites glisser et déposez n’importe quel composant Experience Cloud à l’intérieur de la carte pour en construire le contenu, et 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 de membres d’équipe, les aperçus d’articles ou partout où le contenu du portail a besoin d’une organisation et d’une séparation visuelles claires.

{% 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

### Ajouter un titre de carte

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

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

**Exemple :**

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

### Afficher l’en-tête

Activez l’attribut « Show Header » pour ajouter un conteneur polyvalent en haut à droite de votre Avonni Card. 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 :** Organisez les éléments dans l’en-tête afin d’obtenir l’apparence et les fonctionnalités parfaites pour votre carte.

**Exemple :** Ajoutez un bouton « Créer un nouveau dossier » sur une page de compte client. En cliquant sur ce bouton, un dialogue de flux se lancerait pour guider l’utilisateur dans la création d’une nouvelle demande 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 Avonni Card. Vous pouvez utiliser l’emplacement de pied de page fourni pour ajouter du contenu comme des liens, des boutons ou du texte supplémentaire.

### Marge intérieure 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 serrée, avec le contenu au ras de la bordure, ou pour lui donner davantage d’espace.

### Icône et média

**Nom de l’icône** affiche une icône Lightning Design System dans l’en-tête de la carte.

**Image CMS** et **URL de l’image ou expression** définissez une image média pour la carte — à partir d’un élément CMS ou d’une URL — et **Position de l’image** la place par rapport au contenu : `en haut`, `en bas`, `à gauche`, `à droite`, `au centre`, `arrière-plan`ou `superposition`.

## Cas d'utilisation

| Nom                                                                                                                             | Description                                                                 |
| ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| [**Créer 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 |

## Style

{% tabs %}
{% tab title="Taille" %}

* **Largeur :** Contrôle la largeur horizontale de la carte. Vous pouvez utiliser des largeurs fixes (pixels, pourcentages) ou laisser la carte s’adapter à la taille de son contenu ou 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 comment 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éborde.
    {% endtab %}

{% tab title="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.
  {% endtab %}

{% tab title="Média" %}

* **Largeur :** Contrôle la largeur de la section média de la carte (probablement pour des images ou des 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, au risque de déformer le ratio d’aspect.
  * **Contenir :** Redimensionne le contenu pour qu’il tienne entièrement dans l’espace, laissant éventuellement des zones vides.
  * **Couvrir :** Redimensionne le contenu pour couvrir ամբողջ l’espace, avec un éventuel rognage.
  * **Aucun :** Affiche le contenu à sa taille d’origine.
  * **Réduction proportionnelle :** Le contenu se 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.
  {% endtab %}

{% tab title="Bordure" %}

* **Taille :** Définit l’épaisseur globale de la bordure entourant l’ensemble de la carte.
* **Rayon :** Contrôle l’arrondi des coins de la carte.
* **Couleur :** Définit la couleur de la bordure de la carte
  {% endtab %}
  {% endtabs %}


---

# 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.