AX - Carte

Aperçu

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

Utilisez-le pour présenter des informations en 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. Glissez-déposez n'importe quel composant Experience Cloud à l'intérieur de la carte pour créer son contenu, et configurez le style, les en-têtes et les pieds de page dans Experience Builder.

Parfait pour les catalogues de produits, les bibliothèques de ressources, les profils des membres d'équipe, les aperçus d'articles ou partout où le contenu du portail nécessite une organisation et une séparation visuelle claires.

Ce composant utilise des emplacements 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.

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 :

• Trouvez l'attribut "Card Title" : Ce paramètre se trouve dans les options de configuration du composant Avonni Card dans le constructeur de votre site Experience Cloud.

• Saisissez votre titre : Tapez 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, fournissant un point d'ancrage visuel.

Exemple :

Si votre carte Avonni 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 carte Avonni. Cela vous permet de :

• Personnaliser le contenu de la carte : Vous pouvez glisser-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 pour obtenir l'apparence et la fonctionnalité parfaites de votre carte.

Exemple : Ajouter un bouton « Créer une nouvelle demande » 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'une nouvelle demande de support 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 tel que 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 réglage pour créer une mise en page plus compacte avec le contenu contre la bordure ou pour ajouter plus d'espace.

Tutoriels

Nom	Description
Création d'une vitrine MapCard	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 permettre à la carte de s'adapter à son 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 : Dictée la façon dont la carte gère le contenu qui dépasse ses dimensions. Les options peuvent inclure :

  • Visible : Le contenu déborde en dehors des limites de la carte.

  • Masqué : Le contenu est coupé aux bords de la carte.

  • Défilement : Ajoute des barres de défilement à la carte si le contenu dépasse.

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 tout élément de texte dans l'en-tête.

• Taille de la police : Contrôle la taille du texte de l'en-tête.

• Épaisseur de la police : Définit la graisse du texte de l'en-tête (par exemple normal, gras, léger).

• Famille de polices : 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 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 : Étirer le contenu pour remplir l'espace, ce qui peut déformer le ratio d'aspect.

  • Contenir : Redimensionner le contenu pour qu'il tienne entièrement dans l'espace, pouvant laisser des zones vides.

  • Couvrir : Redimensionner le contenu pour couvrir l'ensemble de l'espace, pouvant recadrer.

  • Aucun : Afficher le contenu à sa taille d'origine.

  • Réduction : 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 la carte entière.

• Rayon : Contrôle le degré d'arrondissement des coins de la carte.

• Couleur : Définit la couleur de la bordure de la carte