Browser non supportato

Utilizza Google Chrome, Mozilla Firefox, Safari, Edge per navigare il nostro sito a tutta velocità e piena esperienza

Componente Card

Tipologie

ragazza che osserva i dati davanti il monitor del suo pc

Hide link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 

Esempio in una Section  

Tipologie

ragazza che osserva i dati davanti il monitor del suo pc

Senza link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 

Esempio in una Section  

La card prodotto presenta un servizio gratuito, incluso nell’offerta o per il quale non è possibile individuare un costo predeterminato, non avendo la possibilità di esporre il componente prezzo. Nella versione minimale (senza immagine) ha la stessa funzione di una CTA ma permette di descrivere più approfonditamente il servizio a cui rimanda.

In relazione alla presenza o meno della CTA Terziaria con freccia, la card assume un ruolo differente:

  • Dove è presente la freccia si fa riferimento alla card servizi/prodotti, un elemento interattivo che ha una animazione all’hover del mouse;
  • Dove NON è presente la freccia si fa riferimento alla card vantaggi, che descrive contenuti aggiuntivi (es. vantaggi di un’offerta o servizio) senza la possibilità di interazione (e quindi senza comportamento di hover)

Una section può contenere al massimo 4 card.
Se si desidera far andare a capo le card, è necessario suddividerle in sezioni separate. Ad esempio, se si ha una sezione con 5 card, verranno disposte in una fila di 4 card, e la quinta andrà a capo. Se si vuole ottenere un layout con 3 card in una fila e 2 card nella fila successiva, bisogna dividerle in due sezioni distinte.

Nei link inserire sempre il TEXT ad esempio se la card porta alla Style Guide, inserire "Scopri Style Guide".

Il Cards Container va sempre inserito, nella pagina desiderata, all'interno di una Section.  Configurare il Cards Container selezionando il componente, accedendo alla chiave inglese e scegliendo il tipo di card da utilizzare in Choose Card Type.

 

CAMPI
1. Immagine 312x312px (Opzionale)
2. Header (Opzionale)
3. Titolo: Max 2 righe
4. Descrizione offerta
5. Elenco puntato: (Opzionale)
a. Ogni punto può essere al max di 2 righe
b. È previsto l’inserimento di un’icona “spunta” all’inizio di ogni punto (Opzionale)
c. È prevista la possibilità di evidenziare parti del testo in grassetto ( Opzionale)
d. È previsto l’inserimento dei loghi dei partner, che possano essere inseriti nei punto dell’elenco. 
L’altezza dei loghi deve essere di 24 px, mentre la larghezza è flessibile (Opzionale)
6. CTA terziaria + icona freccia (Opzionale)