> 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-it/experience-components/ax-card.md).
# AX - Card
## Panoramica
**AX - Card** è un componente Experience Cloud che visualizza i contenuti in un formato contenuto e visivamente strutturato nelle pagine dei siti Experience.
Usalo per presentare le informazioni in blocchi organizzati, come dettagli di prodotto, profili utente, articoli, risorse o qualsiasi contenuto che tragga vantaggio da una separazione visiva. Trascina e rilascia all'interno della card qualsiasi componente Experience Cloud per costruirne il contenuto e configura stile, intestazioni e piè di pagina in Experience Builder.
Perfetto per cataloghi di prodotti, librerie di risorse, profili dei membri del team, anteprime di articoli o ovunque i contenuti del portale richiedano una chiara organizzazione e separazione visiva.
{% hint style="danger" %}
Questo componente [utilizza gli slot](/experience-cloud/experience-cloud-it/per-iniziare/learning-the-basics.md#understanding-slots) per una personalizzazione avanzata, rendendolo ideale per i siti LWR. I siti Aura non supportano questo livello di personalizzazione.
{% endhint %}
## Configurazione di Avonni Card
### Aggiungi un titolo alla card
Assegna ad Avonni Card un titolo chiaro e informativo per aiutare gli utenti a identificare rapidamente il suo contenuto. Ecco come fare:
* **Trova l'attributo "Card Title":** Questa impostazione si trova nelle opzioni di configurazione del componente Avonni Card nel generatore del tuo sito Experience Cloud.
* **Inserisci il tuo titolo:** Digita il testo che vuoi visualizzare come titolo. Mantienilo conciso e descrittivo.
* **Posizionamento:** Il titolo apparirà automaticamente sul lato sinistro di Avonni Card, offrendo un punto di ancoraggio visivo.
**Esempio:**
Se Avonni Card visualizza informazioni sul prodotto, potresti usare un Card Title come "Location".
### Mostra intestazione
Abilita l'attributo "Mostra intestazione" per aggiungere un contenitore versatile nella parte superiore destra di Avonni Card. Questo ti consente di:
* **Personalizzare il contenuto della card:** Puoi trascinare e rilasciare altri componenti, come pulsanti, icone o testo aggiuntivo, direttamente nell'intestazione.
* **Creare layout flessibili:** Disponi gli elementi all'interno dell'intestazione per ottenere l'aspetto e la funzionalità perfetti per la tua card.
**Esempio:** Aggiungi un pulsante "Crea nuovo caso" nella pagina di un account cliente. Facendo clic su questo pulsante si attiverebbe una finestra di flusso che guida l'utente nell'invio di un nuovo caso di assistenza e nella raccolta di tutte le informazioni necessarie.
### Mostra piè di pagina
Questa opzione abilita una sezione piè di pagina nella parte inferiore di Avonni Card. Puoi usare lo slot piè di pagina fornito per aggiungere contenuti come link, pulsanti o testo aggiuntivo.
### Spaziatura interna del contenuto
Regola lo spazio intorno al contenuto all'interno della card. Usa questa impostazione per creare un layout più compatto con il contenuto a filo del bordo oppure per aggiungere più respiro.
## Tutorial
| Nome | Descrizione |
| ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| [**Creare una vetrina MapCard**](/experience-cloud/experience-cloud-it/tutorial/components/card/creating-a-mapcard-showcase.md) | Impara a creare una vetrina MapCard con i componenti Avonni Card e Map |
## Aspetto
### **Dimensione**
* **Larghezza:** Controlla la larghezza orizzontale della card. Puoi usare larghezze fisse (pixel, percentuali) oppure consentire alla card di adattarsi al contenuto o alle dimensioni del contenitore.
* **Altezza:** Controlla l'altezza verticale della card. Analogamente alla larghezza, puoi usare impostazioni di altezza fisse o flessibili.
* **Overflow:** Definisce come la card gestisce il contenuto che supera le sue dimensioni. Le opzioni possono includere:
* **Visibile:** Il contenuto fuoriesce dai bordi della card.
* **Nascosto:** Il contenuto viene ritagliato ai bordi della card.
* **Scorrimento:** Aggiunge barre di scorrimento alla card se il contenuto eccede.
### **Intestazione**
* **Colore di sfondo:** Imposta il colore di sfondo dell'area di intestazione della card.
* **Colore del testo:** Imposta il colore degli elementi di testo all'interno dell'intestazione.
* **Dimensione del carattere:** Controlla la dimensione del testo dell'intestazione.
* **Peso del carattere:** Imposta il grado di grassetto del testo dell'intestazione (ad es. normale, grassetto, leggero).
* **Famiglia di caratteri:** Specifica il tipo di carattere usato per il testo dell'intestazione.
* **Dimensione del bordo inferiore:** Imposta lo spessore del bordo inferiore che separa l'intestazione dal contenuto principale della card.
* **Colore del bordo inferiore:** Imposta il colore del bordo inferiore nell'intestazione.
### **Media**
* **Larghezza:** Controlla la larghezza della sezione media della card (probabilmente per immagini o video).
* **Altezza:** Controlla l'altezza della sezione media della card.
* **Adattamento oggetto:** Determina come un'immagine o un video deve essere ridimensionato per adattarsi al contenitore. Le opzioni includono:
* **Riempimento:** Allunga il contenuto per riempire lo spazio, potenzialmente distorcendo le proporzioni.
* **Contieni:** Ridimensiona il contenuto in modo che rientri completamente nello spazio, lasciando potenzialmente aree vuote.
* **Copri:** Ridimensiona il contenuto per coprire l'intero spazio, ritagliando eventualmente parti del contenuto.
* **Nessuno:** Visualizza il contenuto nelle sue dimensioni originali.
* **Riduci:** Il contenuto viene ridotto se supererebbe le dimensioni del contenitore; altrimenti viene visualizzato alle dimensioni originali.
* **Dimensione del bordo:** Controlla lo spessore del bordo attorno all'elemento media.
* **Colore del bordo:** Imposta il colore del bordo attorno all'elemento media.
### **Bordo**
* **Dimensione:** Imposta lo spessore complessivo del bordo che circonda l'intera card.
* **Raggio:** Controlla quanto sono arrotondati gli angoli della card.
* **Colore:** Imposta il colore del bordo della card
---
# 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-it/experience-components/ax-card.md?ask=&goal=
```
`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.