La card icona viene usata esclusivamente per presentare i vantaggi e punti salienti di un prodotto o un’offerta. Solitamente vengono assemblate 3 o 4 card icona affiancate per un elenco completo dei vantaggi. Ogni card si focalizza su un aspetto diverso del prodotto a cui si riferisce.
Può avere un link per rimandare ad approfondimenti su determinati vantaggi evidenziati. Concettualmente si tratta della card prodotto/documentazione, ma al posto di un’immagine è presente un’icona. In versione mobile è possibile espandere/compattare la card icona tramite uno chevron posto sul fondo.
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).
- Icona 48x48px (Opzionale)
- Header (Opzionale)
- Titolo: Max 2 righe
- Descrizione offerta
- Elenco puntato: (Opzionale)
a. Massimo 4 punti
b. Ogni punto può essere al max di 2 righe
c. È previsto l’inserimento di un’icona “spunta” all’inizio di ogni punto (Opzionale)
d. È prevista la possibilità di evidenziare parti del testo in grassetto ( Opzionale)
e. È 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)
- CTA terziaria + icona freccia (Opzionale)
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 pagina porta a Cyber Pilot, inserire "Scopri Cyber Pilot".
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.