Carte

Aperçu

Le composant Avonni Card est conçu pour présenter divers contenus de manière structurée et visuellement attrayante. Les cartes sont essentielles pour créer des mises en page de contenu bien organisées et faciles à digérer pour afficher des détails de produits, des profils, des articles, et plus encore.

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

Configuration de l'Avonni Card

Ajouter un titre de carte

Donnez à votre Avonni Card 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 votre constructeur de 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 Avonni Card, fournissant 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 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 « Create New Case » sur une page de compte client. Cliquer sur ce bouton déclencherait une boîte de dialogue de flow qui guide l'utilisateur pour soumettre un nouveau ticket de support et collecter toutes les informations nécessaires.

Afficher le pied de page

Cette option active une section de pied de page au bas de votre Avonni Card. Vous pouvez utiliser le slot 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 serrée avec le contenu collé à la bordure ou ajouter plus d'espace respirant.

Tutoriels

Nom	Description
Créer 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 paramètres de hauteur fixes ou flexibles.

• Débordement : Dictе comment la carte gère le contenu qui dépasse ses dimensions. Les options peuvent inclure :

  • Visible : Le contenu s'écoule en dehors des limites de la carte.

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

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

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 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 ex., 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 les images ou 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 à l'échelle le contenu pour qu'il tienne entièrement dans l'espace, pouvant laisser des zones vides.

  • Couvrir : Met à l'échelle le contenu 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