> 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 contenu et visuellement structuré sur les pages Experience Sites.

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 qui bénéficie d'une séparation visuelle. Faites glisser et déposez n'importe quels composants Experience Cloud à l'intérieur de la carte pour construire son 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 des membres de l'équipe, les aperçus d'articles ou partout où le contenu du portail nécessite une organisation visuelle claire et une séparation.

{% hint style="danger" %}
Ce composant [exploite 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="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-893ee94322abb8bcc88a428e7e5a59f2290fbb1d%2F2024-04-14_09-26-27.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

## Configuration

### Ajouter un titre à la carte

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

* **Recherchez l'attribut « Title » :** 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 :** Saisissez le texte que vous souhaitez afficher comme titre. Gardez-le concis et descriptif.
* **Placement :** Le titre apparaîtra automatiquement sur le côté gauche de votre carte Avonni, servant de point d'ancrage visuel.

**Exemple :**

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

**Style du texte du titre** définit la typographie de ce titre : famille de police, taille, graisse et couleur.

### Afficher l'en-tête

« Show Header » est activé par défaut. Il expose deux zones de dépôt en haut de votre carte Avonni : **Actions** en haut à droite, toujours disponible lorsque Show Header est activé, et **Titre** en haut à gauche, disponible uniquement lorsque l' **Titre** attribut est vide, car un titre remplit cette zone avec son propre texte. 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 parfaites de votre carte.

**Exemple :** Ajoutez un bouton « Créer un nouveau cas » sur une page de compte client. Cliquer sur ce bouton déclencherait une boîte de dialogue de flux qui guide 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 de retrait du contenu

Ajustez l'espacement autour du contenu à l'intérieur de votre carte. Utilisez ce paramètre pour créer une disposition plus compacte avec le contenu aligné contre la bordure, ou pour ajouter davantage d'espace. Sur la carte, il est désactivé par défaut, donc le contenu conserve son espacement intérieur jusqu'à ce que vous l'activiez.

### Icône et média

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

**Image CMS** et **URL de l'image ou expression** définissent une image multimédia pour la carte — à partir d'un actif CMS ou d'une URL — et **Position de l'image** la place par rapport au contenu : `haut`, `bas`, `gauche`, `droite`, `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 au contenu ou à la taille du conteneur.
* **Hauteur :** Contrôle la hauteur verticale de la carte. Comme pour la largeur, vous pouvez utiliser des réglages 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éborde 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 d'arrière-plan :** Définit la couleur d'arrière-plan de la zone d'en-tête de la carte.
* **Couleur du texte :** Définit la couleur de tous les éléments de texte dans 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 ex. 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 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 :** Étirer le contenu pour remplir l'espace, au risque de déformer le ratio d'aspect.
  * **Contenir :** Met le contenu à l'échelle pour qu'il tienne entièrement dans l'espace, au risque de laisser des zones vides.
  * **Couvrir :** Met le contenu à l'échelle pour couvrir tout l'espace, au risque d'être rogné.
  * **Aucun :** Affiche le contenu à sa taille d'origine.
  * **Réduire :** Le contenu est réduit s'il devait dépasser 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 totale de la bordure entourant toute la carte.
* **Rayon :** Contrôle le niveau d'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 by asking a question.

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

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-card.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.