Browser non supportato

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

Componente Card

Tipologie

Immagine decorativa
Pretitle

Hide Link - CTA

No Hover Effect

Lorem ipsym

Tipologie

Icona White - offerta - WINDTRE
Pretitle

Hide Link - CTA

No Hover Effect

Lorem ipsym

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.